Dagre-D3 graph. Can egde path be customized?

Question

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:

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?

Answer 1

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:

• Style attributes: https://dagrejs.github.io/project/dagre-d3/latest/demo/style-attrs.html
• Built in shapes: https://dagrejs.github.io/project/dagre-d3/latest/demo/shapes
• Built in arrows: https://dagrejs.github.io/project/dagre-d3/latest/demo/arrows.html
• User defined shapes and arrows: https://dagrejs.github.io/project/dagre-d3/latest/demo/user-defined.html

Answer 2

tl;dr: Adding the property lineInterpolate: 'basis' while setting your edges will draw curved edges. For example,

...
g.setEdge('A', 'B', { lineInterpolate: 'basis' });
...

See this PR for more details.