I need to display a series of data stores in a JSON object. I have to show it in a flowchart, which basically is a tree with one child for each node. Here is my code trying to implement cluster layout.
//JSON object var tmp = { "clusternum":1, "res":["linklinklink"], "cour":["Test Manager","Introduction to Building a Case"], "comp":[], "ex":["none"], "children":[{ "clusternum":2, "res":["fafafa"], "cour":["PLS ASTD Conference"], "comp":[], "ex":["none"], "children":[{ "clusternum":3, "res":[], "cour":["Excel Macros / VBA"], "comp":[], "ex":["none"], "children":[{ "clusternum":4, "res":[], "cour":["none"], "comp":[], "ex":["Midterm"], "children":[{ "clusternum":5, "res":[], "cour":["Project Management Training"], "comp":[], "ex":["none"], "children":[{ "clusternum":6, "res":[], "cour":["Test Management","/learn Blaine Whittle"], "comp":[], "ex":["none"], "children":[{ "clusternum":7, "res":[], "cour":["none"], "comp":[], "ex":["Final"], "children":[""] }] }] }] }] }] }]} var nodes = clusterlayout.nodes(tmp); links = clusterlayout.links(nodes); var link = svg.selectAll(".link") .data(links) .enter().append("path") .attr("class", "link") .attr("d", diagonal); var node = svg.selectAll(".node") .data(nodes) .enter() .append("g") .attr("class", "node") .attr("transform", function (d) { console.log(d);return "translate(" + dy + "," + dx + ")"; }) .on("click", function (d) { d3.select(this).attr("class", "node nodeineffect"); return zoom(d) });
In the Firebug console window, I see that my nodes have x = NaN and y = 0 as attributes, so I cannot use "translate (" + dy + "," + dx + ") to adjust my positions. This problem never happened before when I used simpler JSON objects.Could someone explain why the self-filled coordinators have invalid values? Is there something wrong with my JSON object?