D3.js hierarchy()函数

简介

D3.js是一个用于数据可视化的JavaScript库，该库提供了丰富的API函数，可以用于创建各种类型的图表。其中，hierarchy()函数是D3.js库中用于创建层次结构图的函数之一。

在D3.js中，一个层次结构图由一个嵌套的层次结构数据集组成。层次结构数据集通常包含根节点、父节点和子节点。每个节点可以包含一个或多个孩子节点，这些节点可以形成树状或非树状的结构。

通过hierarchy()函数创建的层次结构数据集通常用于绘制树状图、有向图、包图等。下面，我们将详细介绍hierarchy()函数的使用方法及其相关API函数。

语法

d3.hierarchy(data[, children])

参数说明

• data：表示数据集，可以是一个数组或一个对象。如果传入的是一个数组，则表示根节点的孩子节点；如果传入的是一个对象，则表示根节点。
• children（可选）：指定如何获取节点的子节点。该参数是一个函数，用来返回节点中的子节点。默认情况下，D3.js假定节点中包含一个名为“children”的数组来存储子节点。如果数据集的子节点数据保存在其他属性中，则可以使用该函数来指定如何获取子节点。

返回值

返回一个表示层次结构的根节点对象。该对象包含以下属性：

• node：表示层次结构的根节点。
• links：表示层次结构的所有链接。
• descendants：表示所有后代节点的扁平数组。
• children：表示根节点的所有孩子节点。
• leaves：表示所有叶子节点的扁平数组。
• height：表示层次结构的最大深度。
• depth：表示层次结构的深度。

示例

const data = {
  name: "flare",
  children: [
    {
      name: "analytics",
      children: [
        {
          name: "cluster",
          children: [{ name: "AgglomerativeCluster", size: 3938 }, { name: "CommunityStructure", size: 3812 }]
        },
        {
          name: "graph",
          children: [{ name: "BetweennessCentrality", size: 3534 }, { name: "LinkDistance", size: 5731 }]
        }
      ]
    },
    {
      name: "scale",
      children: [
        { name: "LinearScale", size: 1316 },
        { name: "LogarithmicScale", size: 3151 },
        { name: "OrdinalScale", size: 3770 }
      ]
    }
  ]
};

const root = d3.hierarchy(data);

console.log(root);

上面的代码从一个对象中创建了一个层次结构数据集，然后使用hierarchy()函数将其转换成一个层次结构图中的根节点对象。通过打印出的root对象可以看到，该对象包含了该层次结构的各种属性，例如：所包含节点的深度、高度、子节点、链接等。

API

D3.js库中还提供了一些函数来处理层次结构图数据集，以方便图表的绘制。以下介绍3个常用API函数：

1. hierarchy().sum()

该函数会将每个节点的值设置为该节点值加上所有子孙节点的值的总和。

root.sum(function(d) {
  return d.size;
});

2. hierarchy().sort()

该函数会对节点进行排序。默认情况下，D3.js按照节点的名称来排序。

root.sort(function(a, b) {
  return b.value - a.value;
});

3. hierarchy().each()

该函数可以遍历整个层次结构图，并对每个节点执行指定的操作。

root.each(function(d) {
  console.log(d.name);
});

总结

D3.js hierarchy()函数是一个用于创建层次结构图的函数，可以将嵌套的数据集转换成一个层次结构图中的根节点对象。通过该函数创建的层次结构数据集还提供了一些API函数，可以对节点进行排序、计算节点值、遍历节点等。熟练掌握hierarchy()函数以及相关API函数的使用，可以轻松绘制各种类型的层次结构图。