Network graph using d3.js

Question

I am trying to create a network graph using d3.js and I have data about different devices and their links(interface names on both devices and the interface status(link is up or down).)

I have data about different devices and their links(interface names on both devices and the interface status(link is green or red) as

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

Could you suggest a snippet on how I could represent it as a graph below using d3.js? Any suggestions would be really helpful.

I need my graph to look like this

I need to convert my data array into something that is readable by d3. ie; which has source, target and value

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;
    });

}

Is there any way that I could convert the array of array called links to a data set for d3.js that can be used to generate the graph?

Hi and welcome to stackoverflow! In the future please include some of your research so far. It gives me a bit more incentive to help you when you say `I tried this, looked there, but I didn't understand it...` instead of `I need this, please suggest solutions.` — Saaru Lindestøkke, Jul 07 '20 at 19:37

score 1 · Answer 1 · answered Jul 07 '20 at 19:34

I don't know d3.js, but I see you've included the graphviz tag as well, so I've created the dot syntax below. Hope it's helpful in some way!

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
}

When running this through dot I get this image:

Credits to this answer for describing how to achieve different head- and tail-labels.

Network graph using d3.js

1 Answers1