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) {
d3.selectAll("bubbleChart")
.data(data)
.enter().append("bubbleChart")
.attr("text", function (d) { return d.text; })
.attr("count", function (d) { return d.count; });
});
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: [
{
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; }
}
},
{
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: [
{
style: { "font-size": "50px" },
attr: {}
},
{
style: { "font-size": "30px" },
attr: { dy: "40px" }
}
]
}
}]
});
});
function formatItem(item)
{
return 'text:' + item.text + ', count:' + item.count;
}