4

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?

ike3
  • 1,760
  • 1
  • 17
  • 26

2 Answers2

7

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:

Chris Midgley
  • 1,452
  • 2
  • 18
  • 29
Chris Pettitt
  • 814
  • 7
  • 9
  • Is it possible to draw an exact straight line from one node to another using D3 and Dagre-D3? Haven't had any problems with linear and basis but I'm trying to draw an exact straight line from one node to another. – bschmitty Jun 15 '16 at 17:34
1

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.

sbrk
  • 1,338
  • 1
  • 17
  • 25
  • `lineInterpolate: 'basis'` appears to be out-of-date for curved edges. Use `curve: d3.curveBasis` instead. See the [Dagre D3 Demo: Style Attributes](https://dagrejs.github.io/project/dagre-d3/latest/demo/style-attrs.html) for an example of this and other styles. – kjhughes Jul 09 '20 at 01:07