javascript - 使用 d3.js 的网络图

Question

我正在尝试使用 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 将其表示为下面的图表的片段？任何建议都会非常有帮助。

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

我需要将我的数据数组转换为 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;
    });

}

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

标签： javascripthtmlreactjsd3.jsgraphviz

Answer 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
}

运行此操作时，dot我得到此图像：

归功于此答案，用于描述如何实现不同的头部和尾部标签。