Closed tzookb closed 6 years ago
Latest version of dagre-d3 got updated to D3.js v4: See ebbb84f03bd169061f40d7a1df82cb3b51860187.
Instead of lineInterpolate: 'basis'
use lineCurve: d3.curveBasis
.
This took me a while to figure out also.
In dagre-d3 v0.6.1 this will change to curve: d3.curveBasis
and samples will be updated to use the new approach.
worked like a charm!
thanks guys!!
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!!
It looks like what you want is orthogonal routing of the edge, which is not something currently supported by dagre.
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
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 notifications@github.com 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 https://github.com/dagrejs/dagre-d3/issues/305#issuecomment-362662551, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAt9rKDvIg81SRTCOFF9FC0AkSobwYhks5tQ1C2gaJpZM4Rhfa0 .
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 :/
@tzookb did you find any way to create custom curves?
Sorry @sateesh2499
I moved from Dagre I'm outputting a tree with d3 graph
Okay. Thanks @tzookb
It's working at Angular 7 component mapping also. g.setEdge(sourceEdge, targetEdge, { curve: d3.curveBasis });
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 });
@herzaso any tips or idea to convert bezierCurveTo for arcTo?
Tried to go over the docs and google but could not find nothing :/
the only thing similar is this:
but it didnt curved my edge, any ideas?
thanks!