使用 d3.js 的网络图答案

【问题标题】：Network graph using d3.js使用 d3.js 的网络图
【发布时间】：2020-10-20 07:01:31
【问题描述】：

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

我有关于不同设备及其链接的数据（两个设备上的接口名称和接口状态（链接为绿色或红色）为

nodes: [Device1, Device2, Device3], 
links: [
  { "Device1", "Interface 1", "green", "Device2", "Interface 2", "green"}, 
  { "Device2", "Interface 2", "green", "Device3", "Interface 3", "red"}
]

您能否建议一个关于如何使用 d3.js 将其表示为下面的图表的 sn-p？任何建议都会很有帮助。

我需要我的图表看起来像这样

我需要将我的数据数组转换为 d3 可读的东西。 IE;有源，有目标，有价值

const links = [{
    source: "Device1",
    target: 'Device2',
    value: 'interface1-->interface2'
  },
  {
    source: "Device2",
    target: "Device3",
    value: 'interface3-->interface4'
  },
];

var width = 640;
var height = 640;

let nodes = {};
links.forEach(function(link) {
  link.source = nodes[link.source] ||
    (nodes[link.source] = {
      name: link.source
    });
  link.target = nodes[link.target] ||
    (nodes[link.target] = {
      name: link.target
    });
});

var svg = d3.select('.map').append('svg')
  .attr('width', width)
  .attr('height', height);

var force = d3.layout.force() //build the layout
  .size([width, height]) //specified earlier
  .nodes(d3.values(nodes)) //add nodes
  .links(links) //add links
  .on("tick", tick) //what to do
  .linkDistance(300) //set for proper svg size
  .start();

var link = svg.selectAll('.link')
  .data(links)
  .enter().append('line')
  .attr('class', 'link');

var node = svg.selectAll('.node')
  .data(force.nodes()) //add
  .enter().append('circle')
  .attr('class', 'node')
  .attr('r', width * 0.03); //radius of circle

function tick(e) {

  node.attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return d.y;
    })
    .call(force.drag);

  link.attr('x1', function(d) {
      return d.source.x;
    })
    .attr('y1', function(d) {
      return d.source.y;
    })
    .attr('x2', function(d) {
      return d.target.x;
    })
    .attr('y2', function(d) {
      return d.target.y;
    });

}

有什么方法可以将名为 links 的数组转换为可用于生成图形的 d3.js 数据集？

【问题讨论】：

您好，欢迎来到 stackoverflow！在未来，请包括您迄今为止的一些研究。当你说 I tried this, looked there, but I didn't understand it... 而不是 I need this, please suggest solutions. 时，它给了我更多的动力来帮助你

标签： javascript html reactjs d3.js graphviz

【解决方案1】：

我不知道 d3.js，但我看到你也包含了 graphviz 标记，所以我在下面创建了 dot 语法。希望对您有所帮助！

graph graphname {
    graph [ranksep=3, nodesep=4] // These options are used to approach the example image as close as possible
    edge [fontname="Arial"]
    rankdir=TB
    node [style="solid", fontname="Arial"]
        d1 [label="Device 1"]
        d2 [label="Device 2"]
        d3 [label="Device 3"]
    // Dirty: I tweaked the label position with leading or trailing spaces
    d1 -- d2 [
        taillabel="Interface1"
        headlabel="Interface2    "
        labelfontcolor="darkgreen"
        ]
    d2 -- d3 [ // Had to use HTML labels to give distinct colors to head and tail
        taillabel=<<font color="#006400">   Interface 4</font>>
        headlabel=<<font color="#FF1A1A">Interface 3    </font>>
        ]
    {rank=same d1;d3} // Keeps device 1 and 3 on same level
}

当running this through dot 我得到这张图片时：

感谢this answer 描述了如何实现不同的头尾标签。

【讨论】：