分层

示例 · 考虑以下关系表

姓名	父级
夏娃
该隐	夏娃
塞特	夏娃
以诺斯	塞特
挪亚	塞特
亚伯	夏娃
阿万	夏娃
以诺	阿万
阿祖拉	夏娃

这些名称很方便地是唯一的，因此我们可以将层次结构明确地表示为 CSV 文件

name,parent
Eve,
Cain,Eve
Seth,Eve
Enos,Seth
Noam,Seth
Abel,Eve
Awan,Eve
Enoch,Awan
Azura,Eve

要使用 csvParse 解析 CSV

const table = d3.csvParse(text);

这将返回一个包含 {name, parent} 对象的数组

[
  {"name": "Eve",   "parent": ""},
  {"name": "Cain",  "parent": "Eve"},
  {"name": "Seth",  "parent": "Eve"},
  {"name": "Enos",  "parent": "Seth"},
  {"name": "Noam",  "parent": "Seth"},
  {"name": "Abel",  "parent": "Eve"},
  {"name": "Awan",  "parent": "Eve"},
  {"name": "Enoch", "parent": "Awan"},
  {"name": "Azura", "parent": "Eve"}
]

要转换为 层次结构

const root = d3.stratify()
    .id((d) => d.name)
    .parentId((d) => d.parent)
  (table);

现在，可以将此层次结构传递给层次布局（如 树）以进行可视化。

分层操作符也可以与 分隔路径 一起使用，这在文件系统中很常见。

stratify()

源代码 · 使用默认设置构建新的分层操作符。

const stratify = d3.stratify();

stratify(data)

源代码 · 从指定的表格 data 生成新的层次结构。

const root = stratify(data);

stratify.id(id)

源代码 · 如果指定了 id，则将 id 访问器设置为给定函数并返回此分层操作符。否则，返回当前 id 访问器，它默认为

function id(d) {
  return d.id;
}

id 访问器针对传递给 分层操作符 的输入数据中的每个元素调用，并传递当前数据 (d) 和当前索引 (i)。然后，返回的字符串与 父级 id 结合使用，以识别节点的关系。对于叶节点，id 可能未定义；否则，id 必须是唯一的。（null 和空字符串等同于未定义。）

stratify.parentId(parentId)

源代码 · 如果指定了 parentId，则将父级 id 访问器设置为给定函数并返回此分层操作符。否则，返回当前父级 id 访问器，它默认为

function parentId(d) {
  return d.parentId;
}

父级 id 访问器针对传递给 分层操作符 的输入数据中的每个元素调用，并传递当前数据 (d) 和当前索引 (i)。然后，返回的字符串与 id 结合使用，以识别节点的关系。对于根节点，父级 id 应未定义。（null 和空字符串等同于未定义。）输入数据中必须只有一个根节点，并且不能存在循环关系。

stratify.path(path)

源代码 · 如果指定了 path，则将路径访问器设置为给定函数并返回此分层操作符。否则，返回当前路径访问器，它默认为未定义。

如果设置了路径访问器，则 id 和 parentId 访问器将被忽略，并且会在路径访问器返回的斜杠分隔字符串上计算类似 UNIX 的层次结构，根据需要推断父节点和 id。

例如，给定本地目录中 UNIX find 命令的输出

const paths = [
  "axes.js",
  "channel.js",
  "context.js",
  "legends.js",
  "legends/ramp.js",
  "marks/density.js",
  "marks/dot.js",
  "marks/frame.js",
  "scales/diverging.js",
  "scales/index.js",
  "scales/ordinal.js",
  "stats.js",
  "style.js",
  "transforms/basic.js",
  "transforms/bin.js",
  "transforms/centroid.js",
  "warnings.js",
];

您可以说

const root = d3.stratify().path((d) => d)(paths);