分层边缘捆绑d3 v4 - 最简单的2节点示例

Question

我想用两个节点做最简单的Hierarchical Edge Bundling示例。一旦我完全理解如何正常工作，我应该（希望）能够动态构建完整的可视化。

我看到Mike Bostock的D3 V4示例：https://bl.ocks.org/mbostock/7607999并且想要使用相同的模式。但是，通过JSON数据，它有点压倒性。我希望有两个节点，我可以看到可视化是如何构建的。

JSON文件如何只用两个节点？我试图让绝对最简单的我可以尝试并了解它是如何工作的。任何帮助表示赞赏。

我无法在此处粘贴JSON，因为它超过了最大字符数。如需参考，请查看： https://bl.ocks.org/mbostock/7607999#flare.json

Answer 1

以下是使用3个节点的数据（可视化对2个节点不太有用）：

var data = [{
  "name": "iit.mumbai.pub1",
  "imports": ["iit.chennai.pub3"]
}, {
  "name": "iit.delhi.pub2",
  "imports": ["iit.mumbai.pub1"]
}, {
  "name": "iit.chennai.pub3",
  "imports": ["iit.delhi.pub2"]
}];

以下是它的外观：https://bl.ocks.org/ckothari/raw/473320621a15a7ee1ed684bf3feb4255/。

我在上面的例子中以学术出版物为例。名称中的点代表层级关系，因此在此示例中，iit（学院）有3个孩子（位置）mumbai，delhi和chennai，这些孩子有孩子（出版物）pub1，pub2和pub3。

json中的

imports表示叶节点之间的关系。出版物pub1引用了发布pub3，pub2引用pub1和pub3引用pub2。

Answer 2

为初学者接受的答案添加进一步的解释。

假设我们有 3 个节点（3 个出版物）相互连接。

const data = [
  {
    "name": "pub1",
    "imports": [ "pub3" ]
  },
  {
    "name": "pub2",
    "imports": [ "pub1" ]
  },
  {
    "name": "pub3",
    "imports": [ "pub2" ]
  }
];

它看起来与接受的答案相同。 https://bl.ocks.org/ckothari/raw/473320621a15a7ee1ed684bf3feb4255/。

要根据出版物的来源进一步分组，我们可以使用 . 表示法来表示层次关系。

假设 pub1 和 pub2 属于大学 abc。 pub3 属于大学 xyz。

现在数据看起来像，

const data = [
  {
    "name": "abc.pub1",
    "imports": [ "xyz.pub3" ]
  },
  {
    "name": "abc.pub2",
    "imports": [ "abc.pub1" ]
  },
  {
    "name": "xyz.pub3",
    "imports": [ "abc.pub2" ]
  }
];

在图中，pub1 和 pub2 将彼此靠近，因为它们属于同一个父级。