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)'

Solution 1:

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

Solution 2:

There's probably several causes for this problem, let me add another possibility, which I just encountered. I was seeing the same issue where d3.layout.pack was producing NaN for the coordinates. In my case the issue was that some of the values in my data were negative. Once I made sure they were all zero or greater, it began working fine.