在遵循众多D3示例时,数据通常以flare.json中给出的格式进行格式化:
{ "name": "flare", "children": [ { "name": "analytics", "children": [ { "name": "cluster", "children": [ {"name": "AgglomerativeCluster", "size": 3938}, :
我有一个邻接列表,如下所示:
A1 A2 A2 A3 A2 A4
我想将其转换为以上格式。目前,我正在服务器端执行此操作,但是有没有办法使用d3的功能来实现此目的?我在这里找到了一个,但是这种方法似乎需要修改d3核心库,由于可维护性,我不赞成这样做。有什么建议?
有没有规定的格式,通常可以通过各种访问函数重新定义你的数据(如hierarchy.children)和array.map。但是您引用的格式可能是最方便的树表示形式,因为它可以与默认访问器一起使用。
第一个问题是您打算显示图形还是树。对于图,数据结构是根据节点和链接定义的。对于树,布局的输入是根节点,该根节点可能具有一系列子节点,并且其叶节点具有关联的value。
如果要显示一个 图 ,而您所拥有的只是一个边列表,那么您将要遍历这些边,以生成一个节点数组和一个链接数组。假设您有一个名为“ 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}); } });
像这样: