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

Question

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

我看到了 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://gist.github.com/ckothari/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

将彼此靠近，因为它们属于同一个父级。