分层
¥Stratify
示例 · 考虑以下关系表:
¥Examples · Consider the following table of relationships:
名称 | 父级 |
---|---|
Eve | |
Cain | Eve |
Seth | Eve |
Enos | Seth |
Noam | Seth |
Abel | Eve |
Awan | Eve |
Enoch | Awan |
Azura | Eve |
这些名称非常方便,因此我们可以将层次结构清晰地表示为 CSV 文件:
¥These names are conveniently unique, so we can unambiguously represent the hierarchy as a CSV file:
name,parent
Eve,
Cain,Eve
Seth,Eve
Enos,Seth
Noam,Seth
Abel,Eve
Awan,Eve
Enoch,Awan
Azura,Eve
要使用 csvParse 解析 CSV 文件:
¥To parse the CSV using csvParse:
const table = d3.csvParse(text);
这将返回一个 {name, parent} 对象数组:
¥This returns an array of {name, parent} objects:
[
{"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"}
]
要转换为 hierarchy:
¥To convert to a hierarchy:
const root = d3.stratify()
.id((d) => d.name)
.parentId((d) => d.parent)
(table);
现在可以将此层次结构传递给分层布局(例如 tree)进行可视化。
¥This hierarchy can now be passed to a hierarchical layout, such as tree, for visualization.
分层运算符也适用于 分隔路径,这在文件系统中很常见。
¥The stratify operator also works with delimited paths as is common in file systems.
stratify()
源代码 · 使用默认设置构造一个新的分层运算符。
¥Source · Constructs a new stratify operator with the default settings.
const stratify = d3.stratify();
stratify(data) {#_stratify}
源代码 · 根据指定的表格数据生成一个新的层次结构。
¥Source · Generates a new hierarchy from the specified tabular data.
const root = stratify(data);
stratify.id(id) {#stratify_id}
源代码 · 如果指定了 id,则将 id 访问器设置为给定函数并返回此分层运算符。否则,返回当前 ID 访问器,默认为:
¥Source · If id is specified, sets the id accessor to the given function and returns this stratify operator. Otherwise, returns the current id accessor, which defaults to:
function id(d) {
return d.id;
}
传递给 分层运算符 的输入数据中的每个元素都会调用 id 访问器,并传递当前数据 (d) 和当前索引 (i)。返回的字符串随后用于结合 父节点 ID 节点识别节点的关系。对于叶节点,id 可能未定义;否则,id 必须是唯一的。(Null 和空字符串等同于未定义。)
¥The id accessor is invoked for each element in the input data passed to the stratify operator, being passed the current datum (d) and the current index (i). The returned string is then used to identify the node’s relationships in conjunction with the parent id. For leaf nodes, the id may be undefined; otherwise, the id must be unique. (Null and the empty string are equivalent to undefined.)
stratify.parentId(parentId) {#stratify_parentId}
源代码 · 如果指定了 parentId,则将父级 ID 访问器设置为指定的函数,并返回此分层运算符。否则,返回当前父级 ID 访问器,默认为:
¥Source · If parentId is specified, sets the parent id accessor to the given function and returns this stratify operator. Otherwise, returns the current parent id accessor, which defaults to:
function parentId(d) {
return d.parentId;
}
对于传递给 分层运算符 的输入数据中的每个元素,都会调用父节点 ID 访问器,并传递当前数据 (d) 和当前索引 (i)。返回的字符串随后用于结合 id 节点识别节点的关系。对于根节点,父节点 ID 应为未定义。(Null 和空字符串等同于未定义。)输入数据中必须只有一个根节点,并且不能存在循环关系。
¥The parent id accessor is invoked for each element in the input data passed to the stratify operator, being passed the current datum (d) and the current index (i). The returned string is then used to identify the node’s relationships in conjunction with the id. For the root node, the parent id should be undefined. (Null and the empty string are equivalent to undefined.) There must be exactly one root node in the input data, and no circular relationships.
stratify.path(path) {#stratify_path}
源代码 · 如果指定了 path,则将路径访问器设置为指定的函数,并返回此分层运算符。否则,返回当前路径访问器,默认为未定义。
¥Source · If path is specified, sets the path accessor to the given function and returns this stratify operator. Otherwise, returns the current path accessor, which defaults to undefined.
如果设置了路径访问器,则忽略 id 和 parentId 访问器,并根据路径访问器返回的斜杠分隔字符串计算类似 Unix 的层次结构,并根据需要输入父节点和 ID。
¥If a path accessor is set, the id and parentId accessors are ignored, and a unix-like hierarchy is computed on the slash-delimited strings returned by the path accessor, imputing parent nodes and ids as necessary.
例如,给定 UNIX find 命令在本地目录中的输出:
¥For example, given the output of the UNIX find command in the local directory:
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",
];
你可以这样写:
¥You can say:
const root = d3.stratify().path((d) => d)(paths);