构造树型json_D3.js读取JSON对象构造树型组织结构图

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var data;

var collection;

var tree;

var json;

var i=0;

var k=0;

var svg;

var width = 1000, height = 600;

json={"id":"0","name":"rooot","children":[{"id":"0","name":"parent-1","children":[{"id":"0","name":"child-1","children":[{"id":"0","name":"subchild-1"},{"id":"1","name":"subchild-2"}]},{"id":"2","name":"child-2"},{"id":"3","name":"child-3"}]},{"id":"4","name":"parent-2","children":[{"id":"0","name":"child-4","children":[{"id":"0","name":"subchild-3"}]},{"id":"1","name":"child-5"},{"id":"2","name":"child-6"}]}]};

svg = d3.selectAll("#parent").append("svg")

.attr("id","svg")

.attr("width", width)

.attr("height", height)

.append("g")

.attr("transform", "translate(0,10)");

var cluster = d3.layout.tree();

cluster.size([width,height]);

var nodes = cluster.nodes(json);

var link = svg.selectAll("g.node")

.data(cluster.links(nodes))

.enter().append("g")

.append("path")

.attr("class", "link")

.attr("stroke-dasharray", function(d) {

return (d.source.parent) ? "6,6" : "1,0"; }) //for dashed line

.attr("d", elbow);

var node = svg.selectAll("g.node")

.data(nodes)

.enter().append("g")

.attr("class", "node")

.attr("transform", function(d) {

return "translate(" + d.x + "," + d.y+ ")"; })

node.append("circle")

.attr("r",function(d) {

i++;

return (i==1)? 0 :3});

node.append("rect")

.attr("width", 100)

.attr("height",40)

.attr("id",i)

.attr("fill","steelblue")

.attr("stroke","black")

.attr("stroke-width","1")

.attr("x", function(d) { return -50; })

.attr("y", function(d) { return 77; }) ;

node.append("text")

.attr("dx",0)

.attr("dy", 100)

.attr("class", "text")

.attr("fill","white")

.attr("editable","true")

.attr("text-anchor", function(d) { return d.children ? "middle" : "middle"; })

.text(function(d) { return d.name; });

function elbow(d,i) {

return "M" + ((d.source.x))+ "," + (d.source.depth==0 ? ((d.source.y)+100) : (d.source.y))+ "V" + (d.target.y ) + "H" + d.target.x+"V" + (d.target.children ? "" : d.target.y+100);}