D3 Tips and Tricks v4

Thursday, 14 March 2013

d3.js force directed graph examples (overview)

There are a large number of possible examples to use to demonstrate force directed graphs. I chose to combine two examples that Mike Bostock has demonstrated in the past. Both use the data for the 'who's suing who' graph because I wanted especially to include the directionality aspect of the links. The two graphs I based the final graph on were the Mobile Patent Suits graph....

 … for the directionality and link encoding and the Force-Directed Graph with Mouseover graph...

… for the mouseover effects (note the enlarged 'Microsoft' circle).

In spite of the similarities to each other in terms of data and network linkages, the final example code was quite different, so the end result is a distinct hybrid of the two and will look something like this;

In this example the nodes can be clicked on once to enlarge the associated circle and text and then double clicked on to return them to normal. The links vary in opacity depending on an associated value loaded with the data. The example code for this graph can be found on bl.ocks.org.

To get to this example we'll build up from a basic graph with just the directional arrows to one with node highlighting and then to the version with the link opacity.


  1. Hi D3noob,

    I love your graph, it looks great! Is there any way to make it work in Internet Explorer 10?
    Because I can't see the edges of the graph in IE10.


    1. Good question. Sorry to say I don't know. I suspect it 'should' (since IE is supposed to support SVG by now) but I've never tested it. I've pretty much washed my hands of IE (I know it sounds harsh, but I don't even know what version I have on my PC) because of the intermittent support for SVG. I think your question on Stack Overflow was well asked. Hopefully you will get a suitable response there. Good luck.

  2. Hi
    I was wonder exactly how you align the arrows? If I increase the size of the arrows say to 10,10 for marker height/width I can't get them to align anymore. And I'm not sure where to look to do that.

    1. You have exposed my Achilles heel! I struggled with this for a VERY long time and couldn't find a way to solve it. I think it's buried in the mysteries of SVG, but to this day those arrows haunt my dreams. If you come across a solution, I would be itching to know. Sorry I couldn't be of more help.

  3. Such great examples! I was wondering...

    How would you add a new node with the click of a button?

    1. I've never tried it myself, but the following pages have some good explanations that could work;

  4. hi,
    A quick question, in the link opacity graph, is it possible to change the link color according to the values instead of link opacity...any suggestions?

    1. Sorry for the delay in replying. In answer to your question; Yes. The way I would approach it is to edit the style blocks for each type of link and instead of defining their 'opacity', I'd define the 'stroke' (this is the color of the lines). Or you could leave the opacity in there and add the stroke definition and have both!