CODEWITHSUNDEEP
javascriptd3.jsforce-layout
Liz Yang
Liz Yang

Reputation: 53

how to generate a network graph with edge weight using D3.js force layout

I read many codes about force layout with D3.js and I found that edges elements are only 'source' and 'target'. I want to generate a graph whose layout is like the 'Altas' in Gephi. In my data, edge has elements of 'weight', which describe the correlation of nodes it links, and this is supposed to be took into consideration when start the force layout. So that the similar nodes can gather together. Is there a way to implement so or the physics model used in force layout is irrelevant with the weight of edges?

Upvotes: 5

Views: 3589

Answers (1)

Guybrush
Guybrush

Reputation: 738

Yes, that is possible in D3.js, however, I recommend the webcola library since it is more easy and faster and works very well with D3.js.

Each edge may contain other information besides source and target. So, it is easy to add a weight attribute, e.g.:

let edge = {
  source: node1,
  target: node2,
  weight: 2
};

When using webcola (https://github.com/tgdwyer/WebCola/), you can add some constraints to use your weights, or you can use the linkDistance as a function, explained here: https://github.com/tgdwyer/WebCola/wiki/link-lengths, e.g.:

let weightFactor = 10;
let d3cola = cola.d3adaptor(d3)
                   .size([500, 400])
                   .linkDistance(function (l) { return l.weight * weightFactor; };

So, the steps are:

  1. Build your graph with D3.js, however,
  2. Simulate it with webcola

You can create an instance of a webcola simulation for d3.js like that:

d3cola.avoidOverlaps(true)
      .handleDisconnected(false)
      .start(30);

let simulation = this.d3cola
    .nodes(graph.nodes) // graph is your graph
    .links(graph.edges)
    .start();

Upvotes: 5

Related Questions