curved edges/paths

[tzookb]

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!

[sunlisha]

Latest version of dagre-d3 got updated to D3.js v4: See ebbb84f.

Instead of lineInterpolate: 'basis' use lineCurve: d3.curveBasis.

This took me a while to figure out also.

[lutzroeder]

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

[tzookb]

worked like a charm!

thanks guys!!

[tzookb]

Hey guys

another question you probably know.

I love the above solution for the arrow, but if I want a different curved style arrow like this image:

any idea how I can achieve that?

Thanks in advance!!

[cpettitt]

It looks like what you want is orthogonal routing of the edge, which is not something currently supported by dagre.

[tzookb]

Thanks @cpettitt

I noticed I can pass in a function to the lineCurve
and I see the path, but can't wrap my head around of what to do with it.

like this:

{
    lineCurve: context => {
        console.log(context);
        return new d3.curveBasis(context);
    }
}

Path:
_: "M518.6015625,120.0625L518.6015625,120.0625C518.6015625,120.0625,518.6015625,120.0625,518.6015625,120.0625C518.6015625,120.0625,518.6015625,120.0625,518.6015625,120.0625L518.6015625,120.0625",
_x0: 518.6015625,
_x1: 518.6015625,
_y0: 120.0625,
_y1: 120.0625

[cpettitt]

The x, y coordinates are control points - points where the edge must pass through per the layout assignment. As those are prefixed with an underscore I think that is internal data (either from dagre or d3). Take a look at https://github.com/dagrejs/dagre/wiki#an-example-layout, which describes the public way to get the control points.

…

On Fri, Feb 2, 2018 at 11:20 AM, Tzook ***@***.***> wrote: Thanks @cpettitt <https://github.com/cpettitt> I noticed I can pass in a function to the lineCurve and I see the path, but can't wrap my head around of what to do with it. like this: { lineCurve: context => { console.log(context); return new d3.curveBasis(context); } } Path: _: "M518.6015625,120.0625L518.6015625,120.0625C518.6015625,120.0625,518.6015625,120.0625,518.6015625,120.0625C518.6015625,120.0625,518.6015625,120.0625,518.6015625,120.0625L518.6015625,120.0625", _x0: 518.6015625, _x1: 518.6015625, _y0: 120.0625, _y1: 120.0625 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#305 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAt9rKDvIg81SRTCOFF9FC0AkSobwYhks5tQ1C2gaJpZM4Rhfa0> .

[tzookb]

Thanks @cpettitt

it looks great, but I want to keep using Dagre-D3

and it seems like I can pass the lineCurve

I could probably go find the points and connect them by myself, but surely there is a better way :/

[sateesh2499]

@tzookb did you find any way to create custom curves?

[tzookb]

Sorry @sateesh2499

I moved from Dagre
I'm outputting a tree with d3 graph

[sateesh2499]

Okay. Thanks @tzookb

[gnganapath]

It's working at Angular 7 component mapping also. g.setEdge(sourceEdge, targetEdge, { curve: d3.curveBasis });

[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 });

[hijoncon]

@herzaso any tips or idea to convert bezierCurveTo for arcTo?