problems with latest cluster force layout example

Question

Based on this work: http://bl.ocks.org/mbostock/7882658

If I substitute the automatic nodes creation by a JSON.stringify() output of the automatically generated data like this...

var nodes = [
    {"cluster":2,"radius":1.6180680659922448},
    {"cluster":0,"radius":3.3575295077569},
    {"cluster":1,"radius":0.9569281165554346},
    {"cluster":3,"radius":10.7245554165012}
];

...I get an exception "cannot read property x of undefined" on the line:

var x = d.x - cluster.x,

This is inside the cluster(alpha) function. So, apparently the d3.map function that automatically generates the data is putting something in the structure that the JSON stringification has not caught? Maybe I am just overlooking something simple...help is appreciated. Thanks! Here is a fiddle to help out: http://jsfiddle.net/Nivaldo/FJ3qq/1/

I commented out the code that is not working. Also, another detail, it does not seem like the original code as i left it (except that i reduced the count of clusters and nodes) is actually handling the right number of distinct clusters. It should paint 4 different ones but is only painting with 3 colors.

Answer 1

The problem is that nodes is not the only data structure that needs to be initialised -- clusters needs to be as well. In particular, specific nodes are assigned to specific cluster indices. If you don't do that, things will break.

To fix, do something like

nodes.forEach(function(d) { clusters[d.cluster] = d; });

Complete jsfiddle here.