var json = [ { "name": "张三", "parent": "null", "children": [ { "name": "李四", "parent": "张三", "children": [ { "name": "王五", "parent": "李四", "children": [ {"name": "程六","parent": "王五" }, {"name": "王八","parent": "王五" }, {"name": "王七","parent": "王五" }, { "name": "王九", "parent": "王五", "children":[ {"name": "王十","parent": "王五" }, {"name": "王十一","parent": "王五" }, {"name": "王十二","parent": "王五" }, {"name": "王十三","parent": "王五" }, {"name": "王十四","parent": "王五" }, { "name": "程五", "parent": "王五", "children":[ {"name": "程六","parent": "程五" }, {"name": "程七","parent": "程五" }, {"name": "程八","parent": "程五" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "程九","parent": "程五" }, { "name": "程十", "parent": "程五", "children":[ {"name": "程十一","parent": "程十" }, {"name": "程十二","parent": "程十" }, {"name": "程十三","parent": "程十" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, ] }, ] } ] } ] }, { "name": "马一", "parent": "李四", "children":[ {"name": "马二","parent": "马一" }, {"name": "马三","parent": "马一" }, {"name": "马四","parent": "马一" }, {"name": "马五","parent": "马一" }, {"name": "马六","parent": "马一" }, {"name": "马七","parent": "马一" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, ] } ] }, { "name": "小红", "parent": "张三", "children":[ {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, {"name": "小明","parent": "小红" }, {"name": "小张","parent": "小红" }, {"name": "小王","parent": "小红" }, {"name": "小程","parent": "小红" }, {"name": "小陈","parent": "小红" }, ] } ] } ]; var margin = [20, 120, 20, 120], width = document.getElementById("brainmap").offsetWidth, height = document.getElementById("brainmap").offsetHeight; var i = 0, duration = 750, root; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", zoomed);//添加放大缩小事件 var svg = d3.select("body").select("#brainmap").append("svg") .call(zoom)//给svg绑定zoom事件 .append("g") .call(zoom)//给g绑定zoom事件 .append("g") .attr("transform", "translate(" + margin[3] + "," + margin[0] + ")"); root = json[0]; root.x0 = height / 2; root.y0 = 0; function collapse(d) { if (d.children) { d._children = d.children; d._children.forEach(collapse); d.children = null; } } root.children.forEach(collapse); update(root); function zoomed() { svg.attr("transform", "translate(" + zoom.translate() + ")" + "scale(" + zoom.scale() + ")" ); } function update(source) { // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // Normalize for fixed-depth. nodes.forEach(function(d) { d.y = d.depth * 180; }); // Update the nodes… var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new nodes at the parent's previous position. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", click); nodeEnter.append("circle") .attr("r", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .style("fill-opacity", 1e-6); var nodeUpdate = node.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); nodeUpdate.select("circle") .attr("r", 4.5) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeUpdate.select("text") .style("fill-opacity", 1); var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); nodeExit.select("circle") .attr("r", 1e-6); nodeExit.select("text") .style("fill-opacity", 1e-6); var link = svg.selectAll("path.link") .data(links, function(d) { return d.target.id; }); link.enter().insert("path", "g") .attr("class", "link") .attr("d", function(d) { var o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); link.transition() .duration(duration) .attr("d", diagonal); link.exit().transition() .duration(duration) .attr("d", function(d) { var o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }) .remove(); nodes.forEach(function(d) { d.x0 = d.x; d.y0 = d.y; }); } function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); }