Can't get d3.js data bind to work

See more:

Javascript

data-binding

d3js

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;
}