curved edges/paths

Tried to go over the docs and google but could not find nothing 😕

the only thing similar is this:

graph.setEdge("D", "Z", {
    label: "A to zppppp",
    labelStyle: "font-style: italic; text-decoration: underline;",
    lineInterpolate: 'basis'
  });

but it didnt curved my edge, any ideas?

thanks!

[lutzroeder]

In dagre-d3 v0.6.1 this will change to curve: d3.curveBasis and samples will be updated to use the new approach.

[herzaso]

It’s a bit old but for future reference, here’s how I handled it:

Create a curve function:

const BezierCurve = (context) => ({
  lineStart() {
    this.data = [];
  },

  point(x, y) {
    this.data.push([x, y]);
  },

  lineEnd() {
    const [x0, y0] = this.data[0];
    const [cp1x, cp1y] = this.data[1];
    const [cp2x, cp2y] = this.data[this.data.length - 2];
    const [x1, y1] = this.data[this.data.length - 1];
    context.moveTo(x0, y0);
    context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x1, y1);
  },
});

Assign the curve function to the edges:

g.setEdge(from, to, { curve: BezierCurve });