javascript - d3.s Collapsible Force Layout modification -
is there way have diagram collapsed in beginning? http://bl.ocks.org/mbostock/1093130
it seems mission impossible purpose i'm using identical names in .json file.
here example: http://plnkr.co/edit/vg18z5apuk1hhxzu3ixj?p=preview
code:
var width = 600, height = 600, node, link, root; var leafcolor = d3.scale.category20(); var force = d3.layout.force() .linkdistance(function(d) { return d.target._children ? 80 : 30; }) .charge(function(d) { return d._children ? -d.size / 100 : -150; }) .gravity(0.1) .size([width, height -160]) .on("tick", tick); var vis = d3.select("#chart").append("svg:svg") .attr("width", width) .attr("height", height); function movechildren(node) { if(node.children) { node.children.foreach(function(c) { movechildren(c); }); node._children = node.children; node.children = null; } } var link = vis.selectall(".link"), node = vis.selectall(".node"); d3.json("graph.json", function(error, json) { root = json; root.x = width / 2; root.y = height / 2 - 80; movechildren(json); update(); }); function update(d) { var nodes = flatten(root), links = d3.layout.tree().links(nodes); // restart force layout. force .nodes(nodes) //.nodes([nodes[0]]) .links(links) .start(); // update links. link = vis.selectall("line.link") .data(links, function(d) { return d.target.id; }); // enter new links. link.enter().insert("line", ".node") .attr("class", "link"); // exit old links. link.exit().remove(); // update nodes. node = node.data(nodes, function(d) { return d.id; }); // ?? node.transition() .attr("r", function(d) { return d.children ? 4.5 : math.sqrt(d.size) / 10; }); // enter new nodes. var nodeenter = node.enter().append("g") .attr("class", "node") .on("click", click) .call(force.drag) .attr("href", function(d) { return d.link; }); // exit old nodes. node.exit().remove(); nodeenter.append("svg:a") .attr("xlink:href", function(d){return d.link;}) .append("circle") .attr("r", function(d) { return math.sqrt(d.size) / 15 || 2.5; }); nodeenter.append("text") .attr("dy", "0.35em") .text(function(d) { return d.name; }); node.select("circle") .style("fill", color); } function tick(d) { // sets bounding box node.attr("cx", function(d) { return d.x = math.max(15, math.min(width - 15, d.x)); }) .attr("cy", function(d) { return d.y = math.max(15, math.min(height - 15, d.y)); }); link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); } function color(d) { console.log(d) return leafcolor(d.parentname) } function neighboring(a, b) { return a.index == b.index || linkedbyindex[a.index + "," + b.index]; } // toggle children on click. function click(d) { if (d3.event.defaultprevented) return; // ignore drag if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(); // marks clicked node d3.selectall(".link").transition().duration(500) .style("stroke-width", function(o) { return o.target === d || o.target === d ? 3 : 1; }).style("stroke", function(o) { return o.target === d || o.target === d ? "red" : "grey"; }); d3.selectall(".node").transition().duration(500) .style("stroke-width", function(o) { return neighboring(d, o) ? 1 : 0; }).style("stroke", function(o) { return neighboring(d, o) ? "red" : "white"; }); } // returns list of nodes under root. function flatten(root) { var nodes = [], = 0; function recurse(node) { if (node.children) node.children.foreach(recurse); if (!node.id) node.id = ++i; nodes.push(node); } recurse(root); return nodes; } json:
{ "name": "ar1", "size": 100000, "parentname": "none", "link": "ar1.html", "children": [ { "name": "la", "size": 50000, "parentname": "a", "link": "la.html", "children": [ {"name": "ar", "parentname": "a", "size": 50000, "children": [ {"name": "re", "parentname": "a", "size": 50000, "children": [ {"name": "me", "parentname": "a", "size": 50000} ] }, {"name": "me", "parentname": "a", "size": 50000, "children": [ {"name": "re", "parentname": "a", "size": 50000} ] } ] }, {"name": "re", "parentname": "a", "size": 50000, "children": [ {"name": "ar", "parentname": "a", "size": 50000, "children": [ {"name": "me", "parentname": "a", "size": 50000} ] }, {"name": "me", "parentname": "a", "size": 50000, "children": [ {"name": "ar", "parentname": "a", "size": 50000} ] } ] }, {"name": "me", "parentname": "a", "size": 50000, "children": [ {"name": "ar", "parentname": "a", "size": 50000, "children": [ {"name": "re", "parentname": "a", "size": 50000} ] }, {"name": "re", "parentname": "a", "size": 50000, "children": [ {"name": "ar", "parentname": "a", "size": 50000} ] } ] } ] }, { "name": "ar", "size": 50000, "parentname": "b", "link": "ar.html", "children": [ {"name": "la", "parentname": "b", "size":50000, "children": [ {"name": "re", "parentname": "b", "size": 50000, "children": [ {"name": "me", "parentname": "b", "size": 50000} ] }, {"name": "me", "parentname": "b", "size": 50000, "children": [ {"name": "re", "parentname": "b", "size": 50000} ] } ] }, {"name": "re", "parentname": "b", "size": 50000, "children": [ {"name": "la", "parentname": "b", "size": 50000, "children": [ {"name": "me", "parentname": "b", "size": 50000} ] }, {"name": "me", "parentname": "b", "size": 50000, "children": [ {"name": "la", "parentname": "b", "size": 50000} ] } ] }, {"name": "me", "parentname": "b", "size": 50000, "children": [ {"name": "la", "parentname": "b", "size": 50000, "children": [ {"name": "re", "parentname": "b", "size": 50000} ] }, {"name": "re", "parentname": "b", "size": 50000, "children": [ {"name": "la", "parentname": "b", "size": 50000} ] } ] } ] }, { "name": "re", "size": 50000, "parentname": "c", "link": "re.html", "children": [ {"name": "la", "parentname": "c", "size": 50000, "children": [ {"name": "ar", "parentname": "c", "size": 50000, "children": [ {"name": "me", "parentname": "c", "size": 50000} ] }, {"name": "me", "parentname": "c", "size": 50000, "children": [ {"name": "ar", "parentname": "c", "size": 50000} ] } ] }, {"name": "ar", "parentname": "c", "size": 50000, "children": [ {"name": "la", "parentname": "c", "size": 50000, "children": [ {"name": "me", "parentname": "c", "size": 50000} ] }, {"name": "me", "parentname": "c", "size": 50000, "children": [ {"name": "la", "parentname": "c", "size": 50000} ] } ] }, {"name": "me", "parentname": "c", "size": 50000, "children": [ {"name": "la", "parentname": "c", "size": 50000, "children": [ {"name": "ar", "parentname": "c", "size": 50000} ] }, {"name": "ar", "parentname": "c", "size": 50000, "children": [ {"name": "la", "parentname": "c", "size": 50000} ] } ] } ] }, { "name": "me", "size": 50000, "parentname": "d", "link": "me.html", "children": [ {"name": "la", "parentname": "d", "size": 50000, "children": [ {"name": "ar", "parentname": "d", "size": 50000, "children": [ {"name": "re", "parentname": "d", "size": 50000} ] }, {"name": "re", "parentname": "d", "size": 50000, "children": [ {"name": "ar", "parentname": "d", "size": 50000} ] } ] }, {"name": "ar", "parentname": "d", "size": 50000, "children": [ {"name": "la", "parentname": "d", "size": 50000, "children": [ {"name": "re", "parentname": "d", "size": 50000} ] }, {"name": "re", "parentname": "d", "size": 50000, "children": [ {"name": "la", "parentname": "d", "size": 50000} ] } ] }, {"name": "re", "parentname": "d", "size": 50000, "children": [ {"name": "la", "parentname": "d", "size": 50000, "children": [ {"name": "ar", "parentname": "d", "size": 50000} ] }, {"name": "ar", "parentname": "d", "size": 50000, "children": [ {"name": "la", "parentname": "d", "size": 50000} ] } ] } ] } ] } i got partial here: d3.js collapsible force layout, collapsed default
however, seems quite complex , not work when having identical names of nodes.
i used piece of code:
function movechildren(node) { if(node.children) { node.children.foreach(function(c) { movechildren(c); }); node._children = node.children; node.children = null; } } movechildren(json); as suggested here: d3.js how make nodes collapsed in collapsible indented tree
the diagram gets corrupted. went through many other solution on forim did not work, eg: d3.js collapsible force layout nodes collapsed
how can start nodes collapsed in d3js?
http://bl.ocks.org/david4096/6168323
none of helped. suggestion appreciated. thank you!
Comments
Post a Comment