文章目录

1. 动态获取子节点数据
2. 结束语

因为业务需要折腾起了图表，《D3.js-Tree 实战笔记》系列用于记录使用该库制作 Tree 图表的一些笔记。本文介绍动态获取节点数据，并添加子节点的过程。

动态获取子节点数据

拆分模块

在后面越来越多的功能增加之前，我们要把代码进行下整理，模块拆分首先就是一个整理逻辑的过程。

首先，我们的 Demo 大概可以拆分成这些模块：

初始化 D3 基本能力（设置宽高等）。
数据初始化绑定。
数据更新绑定。
node 交互和绘制。
link 交互和绘制。
单击节点事件处理。
双击获取子节点事件处理（本节新增）。

由于代码篇幅稍微多一些，这里调整后一致在文末体现哈。

Tree node

d3.tree(root)
使用默认的设置构建一个树图布局生成器。

根据指定的根节点代表的 hierarchy 数据生成一个树状布局数据，每个节点包含以下属性:

node.x：节点的 x 坐标
node.y：节点的 y 坐标

为了动态获取时，能有效生成子节点，我们来看看一个 tree node 里面包含了哪些属性：

由于d3.tree()能自动计算生成 x 和 y 位置，而 id、x0、y0 等则是批量处理生成，故我们主要需要添加的属性有：

depth：该节点的层级数，主要用于 y 的计算，避免重叠
parent：保存父节点的信息，用于绘制 link 关系
children：保存子节点的信息

这里分析 tree node 的信息，用于后面动态获取节点信息，手动添加子节点和更新图表。

绑定双击事件

因为我们上面使用了单击来展开和收起子节点，因此这里我们将使用双击来获取子节点。我们在节点 enter 时增加的 click 事件，这里我们再添加个 dbclick 的事件绑定：

// 添加enter操作，添加类名为node的group元素
var nodeEnter = node
  .enter()
  // ...其他操作
  // 给每个新加的节点绑定click事件
  .on("click", click)
  // 给每个新加的节点绑定dbclick事件
  .on("dblclick", dblclick);

然后我们需要添加 dblclick 函数，主要处理逻辑包括：

检查该节点是否已经请求过，已请求过则忽略。
随机请求1.json - 5.json随机获取数据。
获取到数据后，手动给节点添加子节点，同时子节点设置 parent 为该节点。
更新图表。

我们将请求到的数据存在节点的data属性中，同时根据上面 tree node 节点的分析，我们需要手动给子节点添加对应的属性，包括name、depth、parent等。

我们能得到这样的 dblclick 函数：

// 将获取到的节点，添加进data对象中，同时若已获取过不再获取
function dblclick(d) {
  // 若无d.data.children，则视为未获取
  if (!(d.data && d.data.children)) {
    // 这里模拟请求，1.json - 5.json 随机获取数据
    var randomNum = Math.floor(Math.random() * 5) + 1;
    d3.json(randomNum + ".json", function(error, data) {
      if (error) throw error;
      // 给子节点绑定父节点
      var children = data.children.map(x => {
        return {
          name: x.name,
          parent: d,
          depth: d.depth + 1,
          data: {
            ...x
          }
        };
      });
      // 将子节点数据绑定在d节点上
      // 若子节点为空，则不执行
      if (children.length) d.children = children;
      // 同时也绑到data上
      d.data.children = children;
      updateChart(d);
    });
  }
}

上面为什么我们要使用data.children来判断是否已经加载过呢？这是因为 d3 中 node 的 children 不接受空数组，只能为非空数组或是null。而null可能有两种情况：收起、无子节点。同时为了方便后续数据处理，我们使用data属性来保存一切获取来的信息数据。

准备就绪，我们将初始的数据设置为首层节点数据：

1
2
3

var treeData = {
  name: "Top Level"
};

节点状态定义

因为加入 Ajax 获取信息后，节点的状态将会增加，我们给节点添加一些规则：

当未获取子节点信息时，将节点填充灰色，来表示待获取。
当节点拥有子节点、并处于收起状态时，将节点填充浅蓝色，表示拥有子节点。
当节点查无子节点，或是已展开，均无填充状态。

其实只增加了一种状态：是否已获取数据。我们会需要在节点 enter 以及 update 的时候需要增加这个状态。同上，我们使用data.children来判断是否已经加载过：

node
  // ...其他操作
  .style("fill", function(d) {
    return d._children ? "lightsteelblue" : d.data.children ? "#fff" : "#ccc";
  });

双击单击的冲突解决

我们在使用中会发现，双击事件同时会触发两次的单击时间，这其实是不合理的，我们通过添加定时器来解决：

// 当点击时，切换children，同时用_children来保存原子节点信息
function click(d) {
  if (d._clickid) {
    // 若在200ms里面点击第二次，则不做任何操作，清空定时器
    clearTimeout(d._clickid);
    d._clickid = null;
  } else {
    // 首次点击，添加定时器，200ms后进行toggle
    d._clickid = setTimeout(() => {
      if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
      updateChart(d);
      d._clickid = null;
    }, 200);
  }
}

最终我们效果将会如图：

结束语

本节我们添加了节点动态获取子节点的功能，同时给节点加上已读状态，同时处理好单击双击的事件冲突。
我们在完成基本需求的同时，也需要主动改善用户体验，或是不合理的地方要主动提出来，因为说好的要把最棒的一面呈现世间的呢。
此处查看项目代码
 此处查看页面效果

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

Here. There.

Love ice cream. Love sunshine. Love life. Love the world. Love myself. Love you.

D3.js-Tree实战笔记3--动态请求子节点