javascript - NaN x and y values in Pack Layout nodes using d3.js -

i'm trying make circle packing chart using d3.js. problem nodes have nan values in x , y properties, circles have transform="translate(nan,nan)"

json data:

 var data = {      "name": "flare",      "children": [       {        "name": "analytics",        "children": [         {          "name": "cluster",          "children": [           {"name": "agglomerativecluster", "size": 3938},           {"name": "communitystructure", "size": 3812},          ]         },         {          "name": "graph",          "children": [           {"name": "betweennesscentrality", "size": 3534}          ]         }]     }]     }; 

script:

    var diameter = 200;     var w = 500;     var h = 400;      var pack = d3.layout.pack()                 .size(500,400);      var svg = d3.selectall("body").append("svg")                 .attr({width:w,height:h})                 .append("g").attr("transform","translate("+w/2+","+h/2+")");      var nodes = pack.nodes(data);      var circles = svg.selectall("circle")                     .data(nodes)                     .enter()                     .append("circle")                         .attr("r",function(d){return d})                         .attr("transform", function(d){return "translate("+d.x+","+d.y+")";}); 

could explain why x , y node values nan? i've created jsfiddle data , script wrote: http://jsfiddle.net/nm9lozn2/2/

i think need change argument pass .size of pack array. , add .value since data doesn't have value attributes:

https://github.com/mbostock/d3/wiki/pack-layout#value

if value specified, sets value accessor specified function. if value not specified, returns current value accessor, assumes input data object numeric value attribute:

so:

var pack = d3.layout.pack()             .size(500,400); 

to:

var pack = d3.layout.pack()             .size([500,400])             .value(function(d) { return d.size; });