javascriptd3.jsdata-visualizationcircle-pack

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


I'm trying to make a circle packing chart using d3.js. The problem is that nodes have NaN values in the x and y properties, so all the 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 anyone explain why the X and Y node values are NaN? I've created a jsFiddle with the data and the script I wrote: http://jsfiddle.net/nm9Lozn2/2/


Solution

  • I think you need to change the argument you pass to .size of pack to an array. and also add .value since your data doesn't have value attributes:

    https://github.com/mbostock/d3/wiki/Pack-Layout#value

    If value is specified, sets the value accessor to the specified function. If value is not specified, returns the current value accessor, which assumes that the input data is an object with a 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; });