使用 d3.js 创建网络图答案

【问题标题】：Create a network graph using d3.js使用 d3.js 创建网络图
【发布时间】：2020-10-09 08:18:21
【问题描述】：

我正在尝试使用 d3.js 创建网络图，并且我有关于不同设备及其链接和接口状态（链接是打开还是关闭）的数据。

所以，我的图表是这样的

const data = {
    nodes: [{id: "A"}, {id: "B"}, {id: "C"}],
    links: [{
        source: "A",
        sourceInterface: "link1",
        sourceInterfaceUp: true,
        sink: "B",
        sinkInterface: "link2",
        sinkInterfaceUp: false
    }, {
        source: "B",
        sourceInterface: "link3",
        sourceInterfaceUp: true,
        sink: "C",
        sinkInterface: "link4",
        sinkInterfaceUp: true
    }],
}

您能否建议一个 ReactJS 代码来生成一个网络图，该网络图具有节点（A、B 和 C）和顶点（链接 1、2、3 和 4），并使用 d3.js 为这个图数据结构命名

我正在寻找类似this example的东西

但在此示例中，我无法弄清楚如何将 2 个接口分配给连接设备的同一顶点。 (A)--------------(B)------ ------(C)

另外，如何在图表中包含接口状态（true 或false）。

任何示例代码都会有所帮助。

【问题讨论】：

标签： javascript html d3.js svg graphviz

【解决方案1】：

您可以使用 amcharts - 网络图/强制定向树，它与 React 兼容且非常直观。

https://www.amcharts.com/demos/force-directed-network/ https://www.amcharts.com/demos/collapsible-force-directed-tree/

【讨论】：