D3.js — 思维导图

http://www.lai18.com/content/508828.html

思维导图的节点具有层级关系和隶属关系，很像枝叶从树干伸展开来的形状。在前面讲解布局的时候，提到有五个布局是由层级布局扩展来的，其中的树状图（tree layout）和集群图（cluster layout）布局制作出来的图具有“树形”。因此，可以凭借这两种布局来制作思维导图。

1. 构造思路

树状图布局，将一个具有层级关系的对象root转换成节点数组nodes时，情况如下。有一个root对象：

[javascript]  view plain copy

1. {  
2.     name: "node1",  
3.     children:   
4. [  
5.             { name: "node2" },  
6.             { name: "node3" }  
7.     ]  
8. }  

经树状图布局转换后，得到的节点数组nodes如下：

[javascript]  view plain copy

1. [  
2. {  
3.         name: "node1",  
4.         children:   
5.         [  
6.             { name: "node2" },  
7.             { name: "node3" }  
8.         ]  
9.     },  
10.     { name: "node2" },  
11.     { name: "node3" }  
12. ]  

下图是上述节点数组的示意图。由于 node1 具有子节点，可作为开关使用，点击 node1 才会展现 node2 和 node3。


问题是：怎样制作一个“开关”，使得点击树状图中的某个节点时，树状图更新并显示出被点击节点的子节点。
我们知道，树状图的层级关系是由每一个对象的children属性决定的（当然，也可以通过tree.children()修改这一点），也就是说，如果某一个节点的children值为空，则再次用布局计算时，其子节点就不会进入节点数组nodes了。例如，将root改为：

[javascript]  view plain copy

1. {  
2.     name: "node1",  
3.     children: null  
4. }  

则得到的节点数组nodes里将没有node2和node3节点。也就是说，“开关”只要将被点击节点的children设置为null即可。但是，由于将来可能还要用到children节点，可设一临时变量_children保存此值，例如：

[javascript]  view plain copy

1. {  
2.     name: "node1",  
3.     children: null  
4.        _children:       /* 临时变量 */  
5.        [  
6.             { name: "node2" },  
7.             { name: "node3" }  
8.     ]  
9.   
10. }  

树状图布局不会认为_children是保存子节点的变量，只把它看做是一般的变量而保存下来，因此节点数组nodes里只有一个节点。根据上面的思路，写一个开关切换函数如下。

[javascript]  view plain copy

1. //切换开关，d 为被点击的节点  
2. function toggle(d){  
3.   
4. if(d.children){  
5. //如果有子节点  
6.         d._children = d.children; //将该子节点保存到 _children  
7.         d.children = null;  //将子节点设置为null  
8.       
9. }else{  
10. //如果没有子节点  
11.         d.children = d._children; //从 _children 取回原来的子节点   
12.         d._children = null; //将 _children 设置为 null  
13.     }  
14. }  

每次开关状态切换时，都要重新调用布局重新计算节点的位置，也就是说，要有一个重绘函数能够处理数据发生更新的情况。这就又要用到【 选择集与数据 - 第 5 章 】的处理模板，重绘函数的部分代码如下，尤其要注意开关函数是如何被使用的。

[javascript]  view plain copy

1. //重绘函数  
2.  function redraw(source){  
3.   
4.     //重新计算节点和连线  
5.     var nodes = tree.nodes(root);  
6.     var links = tree.links(nodes);  
7.   
8. //获取节点的update部分  
9.     var nodeUpdate = svg.selectAll(".node")  
10.                         .data(nodes, function(d){ return d.name; });  
11.   
12.     //获取节点的enter部分  
13.     var nodeEnter = nodeUpdate.enter();  
14.   
15. //在给enter部分添加新的节点时，添加监听器，应用开关切换函数  
16. nodeEnter.append("g")  
17.            .on("click", function(d) {   
18. toggle(d);   
19. redraw(d);   
20. });  
21.   
22. /*************** 
23.         省略 
24. ***************/  
25. }  

每一个被新添加的节点，都会响应click事件。当某个节点被点击时，如果它具有子节点，则在开关切换函数的作用下，root对象被修改了，然后调用重绘函数后，新的树状图将被绘制。如此一来，树状图具有开关功能，也就可以当做思维导图使用了。

2. 制作思维导图

首先，要有一个具有层级关系的 JSON 文件，本文使用： learn.json
其次，依次创建树状图布局、对角线生成器等，用于绘制树状图。
然后，实现最关键的重绘函数，函数声明如下：

[javascript]  view plain copy

1. function redraw(source)  

只有一个参数source，这是被点击的节点，如果该节点原来为闭合状态，点击后其子节点将显现，如果原来为打开状态，点击后其子节点将隐藏。函数体的实现，分为四个步骤：

2.1 调用布局，计算节点和连线数组

树状图布局的tree.nodes()返回节点数组，tree.links()返回连线数组。其中，对节点的y坐标重新计算，使其只与节点的深度有关，由于后期绘制节点和连线时要将x和y坐标对调，因此这里重计算的实际上是水平方向的坐标。

[javascript]  view plain copy

1. //应用布局，计算节点和连线  
2. var nodes = tree.nodes(root);  
3. var links = tree.links(nodes);  
4.   
5. //重新计算节点的y坐标  
6. nodes.forEach(function(d) { d.y = d.depth * 180; });  

之所以重新计算y坐标，是为了当数据更新（用于点击节点）时，保证树状图的结构不要发生太大的变化，如此看起来比较自然。

2.2 分别处理节点的update、enter、exit三部分

在svg里选择当前所有的节点，使其与节点数组nodes绑定，绑定时要设定一个键函数。键函数里直接返回d.name，当节点数组发生更新时，新节点要与旧节点在名称上相对应。

[javascript]  view plain copy

1. //获取节点的update部分  
2. var nodeUpdate = svg.selectAll(".node")  
3.                .data(nodes, function(d){ return d.name; });  
4.   
5. //获取节点的enter部分  
6. var nodeEnter = nodeUpdate.enter();  
7.   
8. //获取节点的exit部分  
9. var nodeExit = nodeUpdate.exit();  

先处理enter部分，即添加节点。节点的构成为：分组元素里有一个圆表示节点，还有一个文字元素表示节点的名称。元素结构如下：
本例中，每一个新添加的节点都将缓慢地过渡到自己本身的位置，如此更具有友好性。因此，新节点的初始位置都设定在source节点处，确切的说是重回之前source节点的位置，该坐标是保存在source.x0和source.y0里的。另外，对于每一个新节点，设置的半径为0，设置为完全透明，接下来在处理update部分的时候会将这些新节点过渡到正常状态的。下图展示了处理enter部分和update部分时如何节点的位置时如何确定和过渡的。


处理enter部分的代码如下。

[javascript]  view plain copy

1. //1. 节点的 Enter 部分的处理办法  
2. var enterNodes = nodeEnter.append("g")  
3.        .attr("class","node")  
4.        .attr("transform", function(d) {   
5. return "translate(" + source.y0 + "," + source.x0 + ")";   
6. })  
7.        .on("click", function(d) {   
8. toggle(d);   
9. redraw(d);   
10. });  
11.   
12. //省略添加圆和文字部分  

然后处理update部分，将所有节点（包括在enter部分新添加的节点）都缓缓过渡到新的位置。由于新的节点数组是与节点选择集绑定在一起的，因此d.x和d.y里保存的就是新的坐标值。

[javascript]  view plain copy

1. //2. 节点的 Update 部分的处理办法  
2. var updateNodes = nodeUpdate.transition()  
3.                .duration(500)  
4.                .attr("transform", function(d) {   
5. return "translate(" + d.y + "," + d.x + ")";   
6. });  

最后处理exit部分，需要删除的节点的位置缓缓过渡到其父节点处。

[javascript]  view plain copy

1. //3. 节点的 Exit 部分的处理办法  
2. var exitNodes = nodeExit.transition()  
3.  .duration(500)  
4. .attr("transform", function(d) {   
5. return "translate(" + source.y + "," + source.x + ")";   
6. })  
7.  .remove();  

2.3 分别处理连线的update、enter、exit三部分

在svg中选择所有的连线，绑定连线数组links，由此可获得连线的update、enter、exit部分。

[javascript]  view plain copy

1. //获取连线的update部分  
2. var linkUpdate = svg.selectAll(".link")  
3.          .data(links, function(d){ return d.target.name; });  
4.   
5. //获取连线的enter部分  
6. var linkEnter = linkUpdate.enter();  
7.   
8. //获取连线的exit部分  
9. var linkExit = linkUpdate.exit();  

对于连线的enter部分，是插入路径元素path，路径由对角线生成器获取，对角线的起点和终点坐标都是(source.x0, source.y0)。
对于连线的update部分，将所有的连线的位置（对角线的起点和终点）更新到新的位置，即目前绑定的数组links里保存的位置。
对于连线的exit部分，令其缓缓过渡到当前的source点，再移除。

[javascript]  view plain copy

1. //1. 连线的 Enter 部分的处理办法  
2. linkEnter.insert("path",".node")  
3.           .attr("class", "link")  
4.           .attr("d", function(d) {  
5.               var o = {x: source.x0, y: source.y0};  
6.               return diagonal({source: o, target: o});  
7.           })  
8.           .transition()  
9.           .duration(500)  
10.           .attr("d", diagonal);  
11.   
12.  //2. 连线的 Update 部分的处理办法  
13.  linkUpdate.transition()  
14.         .duration(500)  
15.         .attr("d", diagonal);  
16.   
17.  //3. 连线的 Exit 部分的处理办法  
18.  linkExit.transition()  
19.           .duration(500)  
20.           .attr("d", function(d) {  
21.             var o = {x: source.x, y: source.y};  
22.             return diagonal({source: o, target: o});  
23.           })  
24.           .remove();  

2.4 保存当前的节点坐标

当用户点击节点后，数据发生更新，即每个节点的坐标要发生更新。但是，在对节点和连线进行过渡操作的时候，需要使用到更新前的数据（source.x0和source.y0）。因此，每一次调用重绘函数，都要将当前节点的位置保存下来。

[javascript]  view plain copy

1. nodes.forEach(function(d) {  
2.       d.x0 = d.x;  
3.       d.y0 = d.y;  
4. });  

x和y坐标分别保存在x0和y0中，在调用redraw(source)时，被点击的节点被作为参数传到了重绘函数里，因此source.x0和source.y0里保存的是被点击之前节点的坐标。

3. 结果

结果如下图所示，点击节点可以展开子节点。




源代码请单击以下链接，邮件查看源代码：
http://www.ourd3js.com/demo/G-10.0/mind.html 谢谢阅读。

文档信息

版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
发表日期：2015 年 6 月 27 日
更多内容： OUR D3.JS - 数据可视化专题站  和  优快云个人博客
备注：本文发表于  OUR D3.JS  ，转载请注明出处，谢谢