【 D3.js 高级系列 — 10.0 】 思维导图

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

1001

1. 构造思路

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

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

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

1002

问题是:怎样制作一个“开关”,使得点击树状图中的某个节点时,树状图更新并显示出被点击节点的子节点。

我们知道,树状图的层级关系是由每一个对象的children属性决定的(当然,也可以通过tree.children()修改这一点),也就是说,如果某一个节点的children值为空,则再次用布局计算时,其子节点就不会进入节点数组nodes了。例如,将root改为:

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

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

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

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

2. 制作思维导图

首先,要有一个具有层级关系的 JSON 文件,本文使用:learn.json

其次,依次创建树状图布局、对角线生成器等,用于绘制树状图。

然后,实现最关键的重绘函数,函数声明如下:

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

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

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

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

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

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

先处理enter部分,即添加节点。节点的构成为:分组元素里有一个圆表示节点,还有一个文字元素表示节点的名称。元素结构如下:

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

1003

处理enter部分的代码如下。

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

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

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

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

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

2.4 保存当前的节点坐标

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

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

3. 结果

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

1004

1005

源代码请单击以下链接,邮件查看源代码:

http://www.ourd3js.com/demo/G-10.0/mind.html

谢谢阅读。

文档信息

【 D3.js 高级系列 — 10.0 】 思维导图》上有14条评论

    • 抱歉,回答晚了。
      主要是理解

      这里的size是什么意思,一般设定成width和height,如此出来的结果就是 d.x 表示横向的 x 坐标, d.y 是竖向的 y 坐标。如果像上面那样设定,就表示 d.x 是角度,d.y是半径。
      至于 d.x 为什么要减 90,仅仅是为了旋转一下图表而已,即每个顶点的位置旋转90度。不减90°就不旋转。如此而已,没什么别的意思。

  1. 有两个问题想请问您,1:如何让根节点不移动坐标。既点击展开子节点或子节点中的子节点,根节点一直保持不变:2:如何让子节点展开后,超出画布依然会显示出来,拥有无限层子节点,初始svg不想画很大。

    • 你好,
      1. 文中的方法,是能自动适应y坐标,使其布局更加美观的一种效果。如果要做到你的想法,方法与本文差别还挺大的,可以一开始就以所有节点都展开的状况布局所有节点,其后,当点击节点时,子节点移动到父节点处,再渐变消失即可。但是,这种效果是不太美观的,比如有可能同级的节点之间的间隔不相等。
      2. 不好办,最开始指定布局的 size 时,width 应该是定死的,你的所有节点都在这个 width 内。

  2. 请问这个思维导图能否实现以下功能:
    ①通过右键添加子节点
    ②能否跟数据库实现交互,并重新绘制,比如,我要动态在父节点上添加子节点,并且该子节点是用前端添加的,然后与服务器交互。

  3. 你好,我碰到一个问题,就是所有的name值必须唯一,比如,如果2个同级的节点的子节点中有相同的name,那么只会显示一个。不知这个怎么解决呢?因为这种需求是合理的。麻烦解答下,谢谢

    • 你好,在这个例子中,我把节点的名称name作为绑定数据的键使用了,所以在这个例子中不能存在两个相同的名称。

      就是这段:

      解决方法可以是这样的:给每一个节点添加一个唯一的id变量,绑定的时候用id号绑定,那么就可以存在相同的名称了。

      这么解释不知道好懂吗?如果有疑问,请继续提问。

      • “给每一个节点添加一个唯一的id变量”,没有完全理解,是在json数据中添加吗?可否写详细一点呢。

        • 添加在json里也可以,也可以在程序上实现,例如,在用d3.json读入文件后,加入以下代码,为每一个节点赋值一个id:

          然后,在绑定数据的时候,修改两个地方,一个是节点的:

          以及,

          如此,name不再作为键使用,即可支持相同名称的name。

          如果需要完成的代码,请告诉我一声,这里不方便粘贴全部。

          希望这些能帮到你,谢谢。

  4. 极好的教程!非常感谢能整理这么多!在以后的WEB应用中,图表变得特别重要

  5. 刚刚接触d3js,就能看到这么优秀的教程~

  6. 已從到至尾學習并實踐完樓主的教程。樓主講得特別詳細,基本沒有遇到解決不了的問題。另外這站點也是非常棒,界面簡潔上檔次。
    特別希望樓主能繼續出作品,特別是關于D3官網的Deomo里其它圖的教程,例如hiveplot等等。謝謝樓主。

评论已关闭。