如何转换为 D3 的 JSON 格式?

IT技术 javascript json graph d3.js tree
2021-03-11 02:20:08

在遵循大量 D3 示例时,数据通常会以flare.json 中给出的格式进行格式化

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      :

我有一个邻接表如下:

A1 A2
A2 A3
A2 A4

我想转换为上述格式。目前,我正在服务器端执行此操作,但是有没有办法使用 d3 的函数来实现此目的?我在这里找到了一个,但该方法似乎需要修改 d3 核心库,由于可维护性,我不赞成这样做。有什么建议?

2个回答

没有规定的格式,因为您通常可以通过各种访问器函数(例如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});
  }
});

像这样:

@mbostock,感谢您的回答,您是否对代码进行了改编以绘制这种图表bl.ocks.org/mbostock/1062288多谢
2021-04-21 02:20:08
+1 非常感谢您的时间和详细的解释。它清除了我的一些误解。
2021-04-26 02:20:08
考虑使用 d3 的嵌套功能作为此方法的一部分将您的 csv 转换为不同的树结构github.com/mbostock/d3/wiki/Arrays#-nest
2021-05-06 02:20:08

D3 不需要特定的格式。这一切都取决于您的应用程序。您当然可以将邻接列表转换为flare.json 中使用的格式,但这又是特定于应用程序的代码。通常,您不能这样做,因为这样的邻接列表没有构建树所需的“头”或“根”元素。此外,您需要单独处理循环、孤儿等。

鉴于您目前正在服务器端进行转换,我很想说“如果它没有损坏,请不要修复它”;)