d3.jsdagre-d3

Dagre-D3 graph. Can egde path be customized?


I've managed to create some graph using dagre-d3 graph layout library. The library works wonderful but seems a bit lacking in documentation.

My graph really looks like this example: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

What I really want to do is to customize the edges so they will look like this picture: enter image description here

So, basically, I need to customize the svg path element representing the edge. I did some research and it seems possible to use graphviz styles (arrows, colors, etc) but hasn't found any way to customize the connection path itself.

Is it possible to customize it somehow?


Solution

  • Check out this graph. It shows how to use styles on edges, change the way the edge is layed out (lineInterpolate), and how to remove the arrowhead.

    For more details on styling, see https://github.com/dagrejs/dagre-d3/wiki#demos. In particular, the following may be helpful: