无法获得d3.js数据绑定工作 [英] Can't get d3.js data bind to work
本文介绍了无法获得d3.js数据绑定工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
无法将新数据绑定到D3 BubbleChart。我对API的AJAX调用得到了很好的JSON回复。我检查了答复，它获得的数据格式与用于初始设置图表的硬编码数据中定义的格式相同。我必须遗漏一些东西，因为我的图表没有显示新数据。我需要重绘图表吗？以下是我的尝试
我尝试过：
Having trouble binding new data to a D3 BubbleChart. My AJAX call to the API is getting a good JSON reply. I checked the reply and it is getting data in the same format as defined in the hardcoded data used to initially setup the chart. I must be missing something because my chart does not show the new data. Do I need to redraw the chart? Below is what I have tried
What I have tried:
$(document).ready(function () {
var uri = 'api/testing';
$.getJSON(uri, function (data, error) {
//DATA BIND/START - NOT UPDATING CHART
d3.selectAll("bubbleChart")
.data(data)
.enter().append("bubbleChart")
.attr("text", function (d) { return d.text; })
.attr("count", function (d) { return d.count; });
//DAT BIND/END
});
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
size: 600,
innerRadius: 600 / 3.5,
radiusMin: 50,
data: {
items: [
{ text: "aaa", count: "236" },
{ text: "bbb", count: "382" },
{ text: "ccc", count: "170" },
{ text: "ddd", count: "123" },
{ text: kk, count: ll}
],
eval: function (item) { return item.count; },
classed: function (item) { return item.text.split(" ").join(""); }
},
plugins: [
{
name: "central-click",
options: {
text: "(See more detail)",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
"fill": "white"
},
attr: { dy: "65px" },
centralClick: function () {
alert("Here is more details!!");
}
}
},
{
name: "lines",
options: {
format: [
{// Line #0
textField: "count",
classed: { count: true },
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "0px",
x: function (d) { return d.cx; },
y: function (d) { return d.cy; }
}
},
{// Line #1
textField: "text",
classed: { text: true },
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function (d) { return d.cx; },
y: function (d) { return d.cy; }
}
}
],
centralFormat: [
{// Line #0
style: { "font-size": "50px" },
attr: {}
},
{// Line #1
style: { "font-size": "30px" },
attr: { dy: "40px" }
}
]
}
}]
});
});
function formatItem(item)
{
return 'text:' + item.text + ', count:' + item.count;
}
推荐答案
（document）.ready（function（）{
var uri ='api / testing ';
(document).ready(function () { var uri = 'api/testing';
.getJSON（uri，function（data，error）{
// DATA BIND / START - NOT UPDATING CHART
d3.selectAll （bubbleChart）
.data（data）
.enter（）。append（bubbleChart）
.attr（text，function（d）{return d.text; }）
.attr（count，function（d）{return d.count;}）;
// DAT BIND / END
}）;
var bubbleChart = new d3.svg.BubbleChart（{
supportResponsive：true，
size：600，
innerRadius：600 / 3.5，
radiusMin：50，
data：{
项目：[
{text：aaa，count：236}，
{text：bbb，count：382}，
{text： ccc，count：170}，
{text：ddd，count：123}，
{text：kk，count：ll}
]，
eval：function（它em）{return item.count; }，
分类：function（item）{return item.text.split（）。join（）; }
}，
插件：[
{
名称：中央点击，
选项：{
text：（查看更多详情） ，
样式：{
font-size：12px，
font-style：italic，
font-family：来源Sans Pro，sans-serif，
text-anchor：middle，
fill：white
}，
attr：{dy：65px }，
centralClick：function（）{
alert（这是更多细节!!）;
}
}
}，
{
名称：行，
期权：{
格式：[
{ //行＃0
textField：count，
分类：{count：true}，
样式：{
font-size：28px，
font-family：Source Sans Pro，sans-serif，
text-anchor：middle，
fill：white
}，
attr：{
dy：0px，
x：function（d）{return d.cx; }，
y：function（d）{return d.cy; }
}
}，
{//行＃1
textField：text，
分类：{text：true}，
样式： {
font-size：14px，
font-family：Source Sans Pro，sans-serif，
text-anchor：middle，
fill：white
}，
attr：{
dy：20px，
x：function（d）{return d.cx; }，
y：function（d）{return d.cy; }
}
}
]，
centralFormat：[
{//行＃0
样式：{font-size：50px }，
attr：{}
}，
{//行＃1
样式：{font-size：30px}，
attr： {dy：40px}
}
]
}
}]
}）;
}）;
function formatItem（item）
{
return'text：'+ item.text +'，count：'+ item.count;
}
.getJSON(uri, function (data, error) { //DATA BIND/START - NOT UPDATING CHART d3.selectAll("bubbleChart") .data(data) .enter().append("bubbleChart") .attr("text", function (d) { return d.text; }) .attr("count", function (d) { return d.count; }); //DAT BIND/END }); var bubbleChart = new d3.svg.BubbleChart({ supportResponsive: true, size: 600, innerRadius: 600 / 3.5, radiusMin: 50, data: { items: [ { text: "aaa", count: "236" }, { text: "bbb", count: "382" }, { text: "ccc", count: "170" }, { text: "ddd", count: "123" }, { text: kk, count: ll} ], eval: function (item) { return item.count; }, classed: function (item) { return item.text.split(" ").join(""); } }, plugins: [ { name: "central-click", options: { text: "(See more detail)", style: { "font-size": "12px", "font-style": "italic", "font-family": "Source Sans Pro, sans-serif", "text-anchor": "middle", "fill": "white" }, attr: { dy: "65px" }, centralClick: function () { alert("Here is more details!!"); } } }, { name: "lines", options: { format: [ {// Line #0 textField: "count", classed: { count: true }, style: { "font-size": "28px", "font-family": "Source Sans Pro, sans-serif", "text-anchor": "middle", fill: "white" }, attr: { dy: "0px", x: function (d) { return d.cx; }, y: function (d) { return d.cy; } } }, {// Line #1 textField: "text", classed: { text: true }, style: { "font-size": "14px", "font-family": "Source Sans Pro, sans-serif", "text-anchor": "middle", fill: "white" }, attr: { dy: "20px", x: function (d) { return d.cx; }, y: function (d) { return d.cy; } } } ], centralFormat: [ {// Line #0 style: { "font-size": "50px" }, attr: {} }, {// Line #1 style: { "font-size": "30px" }, attr: { dy: "40px" } } ] } }] }); }); function formatItem(item) { return 'text:' + item.text + ', count:' + item.count; }
这篇关于无法获得d3.js数据绑定工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
