没有规定的格式,因为您通常可以通过各种访问器函数(例如hierarchy.children)和array.map重新定义数据。但是您引用的格式可能是树最方便的表示形式,因为它适用于默认访问器。
第一个问题是您打算显示图形还是树。对于图,数据结构是根据节点和链接定义的。对于树,布局的输入是根节点,它可能有一个子节点数组,其叶节点有一个关联值。
如果您想显示一个图形,而您所拥有的只是一个边列表,那么您将需要遍历这些边以生成一个节点数组和一个链接数组。假设您有一个名为“graph.csv”的文件:
source,target
A1,A2
A2,A3
A2,A4
您可以使用d3.csv加载此文件,然后生成节点和链接数组:
d3.csv("graph.csv", function(links) {
var nodesByName = {};
// Create nodes for each unique source and target.
links.forEach(function(link) {
link.source = nodeByName(link.source);
link.target = nodeByName(link.target);
});
// Extract the array of nodes from the map by name.
var nodes = d3.values(nodeByName);
function nodeByName(name) {
return nodesByName[name] || (nodesByName[name] = {name: name});
}
});
然后,您可以将这些节点和链接传递到力布局以可视化图形:
如果你想生成一棵树,那么你需要做一种稍微不同的数据转换形式来累积每个父节点的子节点。
d3.csv("graph.csv", function(links) {
var nodesByName = {};
// Create nodes for each unique source and target.
links.forEach(function(link) {
var parent = link.source = nodeByName(link.source),
child = link.target = nodeByName(link.target);
if (parent.children) parent.children.push(child);
else parent.children = [child];
});
// Extract the root node.
var root = links[0].source;
function nodeByName(name) {
return nodesByName[name] || (nodesByName[name] = {name: name});
}
});
像这样: