使用d3.js生成一个可折叠的树如图所示怎么做呢？（或者可以实现该功能的其他库文件也可以）
所有回答(1)
0
//定义布局范围 var treeWidth = width-50; var treeHeight = height-80; //定义D3树布局范围 var tree = d3.layout.tree() .size([treeHeight, treeWidth-100])//注意D3布局跟svg坐标系无关,size(高，宽) .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });//设置相隔节点的间距，a、b节点相隔 //定义连线生成器 var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; });//设置连线点的变换器 //绘制svg图形 var svg = d3.select("#relevanceRuleConfig").append("svg") .attr("width", treeWidth) .attr("height", treeHeight) .append("g") .attr("transform", "translate(40,0)");//定义偏移量 //加载数据 d3.json($WEB_ROOT_PATH+"/jsproject/dqms/rulemanageconfig/data.json", function(error, root) { var nodes = tree.nodes(root); //获取所有节点信息 var links = tree.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) { return "translate(" + d.y + "," + d.x + ")"; }) //添加节点图标 node.append("circle") .attr("r", 4.5); //添加节点显示文本 node.append("text") .attr("dx", function(d) { return d.children ? -8 : 8; })//定义文本显示x轴偏移量 .attr("dy", 3)//定义文本显示y轴偏移量 .style("text-anchor", function(d) { return d.children ? "end" : "start"; })//文字对齐显示 .text(function(d) { return d.name; }); });
http://blog.csdn.net/mafan121/article/details/50435530
怎么把连接线变成直线呢？和图片的那样的
@一叶*秋:
//绘制连线 var link = svg.selectAll(".link") .data(links) .enter() .append("path") .attr("class", "link") .attr("d", diagonal); 改成这个试试： //绘制连线 var link = svg.selectAll(".link") .data(links) .enter() .append("line") .attr("class", "line") .attr("d", diagonal);
@一叶*秋:
index.html# <!DOCTYPE html> <meta charset="utf-8"> <style> text { font-family: "Helvetica Neue", Helvetica, sans-serif; } .name { font-weight: bold; } .about { fill: #777; font-size: smaller; } .link { fill: none; stroke: #000; shape-rendering: crispEdges; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var margin = {top: 0, right: 320, bottom: 0, left: 0}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var tree = d3.layout.tree() .separation(function(a, b) { return a.parent === b.parent ? 1 : .5; }) .children(function(d) { return d.parents; }) .size([height, width]); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.json("tree.json", function(error, json) { if (error) throw error; var nodes = tree.nodes(json); var link = svg.selectAll(".link") .data(tree.links(nodes)) .enter().append("path") .attr("class", "link") .attr("d", elbow); var node = svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) node.append("text") .attr("class", "name") .attr("x", 8) .attr("y", -6) .text(function(d) { return d.name; }); node.append("text") .attr("x", 8) .attr("y", 8) .attr("dy", ".71em") .attr("class", "about lifespan") .text(function(d) { return d.born + "–" + d.died; }); node.append("text") .attr("x", 8) .attr("y", 8) .attr("dy", "1.86em") .attr("class", "about location") .text(function(d) { return d.location; }); }); function elbow(d, i) { return "M" + d.source.y + "," + d.source.x + "H" + d.target.y + "V" + d.target.x + (d.target.children ? "" : "h" + margin.right); } </script> tree.json# { "name": "Clifford Shanks", "born": 1862, "died": 1906, "location": "Petersburg, VA", "parents": [ { "name": "James Shanks", "born": 1831, "died": 1884, "location": "Petersburg, VA", "parents": [ { "name": "Robert Shanks", "born": 1781, "died": 1871, "location": "Ireland/Petersburg, VA" }, { "name": "Elizabeth Shanks", "born": 1795, "died": 1871, "location": "Ireland/Petersburg, VA" } ] }, { "name": "Ann Emily Brown", "born": 1826, "died": 1866, "location": "Brunswick/Petersburg, VA", "parents": [ { "name": "Henry Brown", "born": 1792, "died": 1845, "location": "Montgomery, NC" }, { "name": "Sarah Houchins", "born": 1793, "died": 1882, "location": "Montgomery, NC" } ] } ] }
@抽象ID: 这个折叠点击折叠咋实现的呢？在哪里学的呢？
@抽象ID: 你好请问一下这些小图标是怎么引用的呢？
