首页 新闻 搜索 专区 学院

使用d3.js生成一个可折叠的树如图所示怎么做呢?(或者可以实现该功能的其他库文件也可以)

0
悬赏园豆:20 [待解决问题]

在线等特急,最好有说明注释,希望大家不吝赐教

一叶*秋的主页 一叶*秋 | 初学一级 | 园豆:8
提问于:2018-03-05 22:14
< >
分享
所有回答(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

 

http://blog.csdn.net/joker_fei/article/details/76910023

悟行 | 园豆:12328 (专家六级) | 2018-03-06 09:26

怎么把连接线变成直线呢?和图片的那样的

支持(0) 反对(0) 一叶*秋 | 园豆:8 (初学一级) | 2018-03-06 10:23

@一叶*秋: 

 //绘制连线  
    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);  
支持(0) 反对(0) 悟行 | 园豆:12328 (专家六级) | 2018-03-06 10:31

@一叶*秋: 

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"
        }
      ]
    }
  ]
}


https://bl.ocks.org/mbostock/2966094

支持(0) 反对(0) 悟行 | 园豆:12328 (专家六级) | 2018-03-06 10:37

@抽象ID: 这个折叠点击折叠咋实现的呢?在哪里学的呢?

支持(0) 反对(0) 一叶*秋 | 园豆:8 (初学一级) | 2018-03-06 10:51

@抽象ID: 你好请问一下这些小图标是怎么引用的呢?

支持(0) 反对(0) 一叶*秋 | 园豆:8 (初学一级) | 2018-03-06 13:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册