D3: `bubble.nodes` not applying correct graphical data to dataset

Question

I am trying to create a Bubble Chart using D3 but can't figure out why my data is not processing correctly. I have imported the processed data from PHP and am now trying to run bubble.node in order to apply relevant graphical data for the circles of the chart (radius, x-coord, y coord etc.). Instead I am currently getting the error:

Error: Invalid value for <g> attribute transform="translate(undefined,undefined)"

Here's the code (so far; have stopped here because of the error):

$(document).ready(function() {
    // pull data from php file
    var topFrequency = '<?php echo json_encode($frequencyJSON)?>';

    var diameter = 510;

    // create new pack layout
    var bubble = d3.layout.pack()
                   .sort(null)
                   .size([diameter, diameter]);

    // select chart3 div and append svg canvas for graph
    var canvas = d3.select(".chart3").append("svg")
                                     .attr("width", diameter)
                                     .attr("height", diameter)
                                     .append("g");

    jsonData = JSON.parse(jsonData);

    // should return array of nodes associated with data
    // computed position of nodes & graphical data for each node
    var nodes = bubble.nodes(topFrequency);

    var node = canvas.selectAll(".node")
                     .data(nodes)
                     .enter()
                     .append("g")
                     // give nodes a class name for referencing
                     .attr("class", "node")
                     .attr("transform", function (d) {
                         return "translate(" + d.x + "," + d.y + ")";
                     });
});

topFrequency looks like this in console.log :

{"name":"frequencyData",
    "children":[
        {
            "author1":"TUYTTENS, FAM",
            "frequency":7
        },
        {
            "author1":"REVILLA, E",
            "frequency":7
        },
        {
            "author1":"ROPER, TJ",
            "frequency":7
        },
        {
            "author1":"MACDONALD, DW",
            "frequency":6
        },
        {
            "author1":"WOODROFFE, R",
            "frequency":5
        },
        {
            "author1":"CHEESEMAN, CL",
            "frequency":4
        },
        {
            "author1":"GALLAGHER, J",
            "frequency":4
        },
        {
            "author1":"KOWALCZYK, R",
            "frequency":3
        },
        {
            "author1":"HANCOX, M",
            "frequency":3
        },
        {
            "author1":"VIRGOS, E",
            "frequency":3
        }
    ]
}

So far as I can tell I'm getting the undefined error above because the x and y attributes aren't being created in the array of nodes but I can't figure out why. Perhaps my data is in an incorrect format?

** EDIT **

Added JSON.parse(topFrequency) to get data in correct format. Now console.log(jsonData) gives:

Object {name: "frequencyData", children: Array[10]}
children: Array[10]
    0: Object
        author1: "CARTES, JE"
        depth: 1
        frequency: 10
        parent: Object
        r: NaN
        value: 0
        x: NaN
        y: NaN
    1: Object
        author1: "SASSEN, R"
        depth: 1
        frequency: 8
        parent: Object
        r: NaN
        value: 0
        x: NaN
        y: NaN
    2: Object
    3: Object
    4: Object
    5: Object
    6: Object
    7: Object
    8: Object
    9: Object
    length: 10
depth: 0
name: "frequencyData"
r: NaN
value: 0
x: NaN
y: NaN

Although this is now returning the correct attributes, it's returning NaN for the values. It is also doing this before I call bubble.nodes ; I thought these attributes were added by bubble.nodes !

Answer 1

You are missing a value accessor function for your data:

var bubble = d3.layout.pack()
  .sort(null)
  .value(function(d){
    return d.frequency; //<-- frequency is your accessor
  })
  .size([diameter, diameter]);

Of course, you also need to append some visual element (like circles) instead of just empty groups.

Here's an example .