search

d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.47k stars 304 forks source link

curve option for linkHorizontal and linkVertical #177

Closed Fil closed 2 years ago

Fil commented 3 years ago

Test @ https://observablehq.com/d/504d8793ac6f9487

(We should also test the radial version, though it does not offer a curve option I had to rewrite it to match the internal API.)

bumpX (default)

bumpX

others

step linear bumpY stepBefore stepAfter

Fil commented 3 years ago
Capture d’écran 2021-03-29 à 20 32 25
curran commented 3 years ago

Yes please!!! Amazing.

bumbeishvili commented 3 years ago

Judging from my experience, 70% of trees, which graphic designers produce, have a similar link/diagonal curve pattern as in the image bellow

Screenshot 2021-03-30 at 10 00 54

Fil commented 3 years ago

If this PR lands, you could implement it as a line curve (maybe curveBraceX and curveBraceY?).

EDIT: an apt name might be curveStepRadius

curran commented 3 years ago

Let's add linkLol to d3.

Here's an iteration of it that straightens the root.

image

RyKilleen commented 3 years ago

This abstraction would personally benefit me, and I was surprised to find the lib didn't work that way already. Thanks for this PR, and I look forward to it landing!

roipoussiere commented 12 months ago

This feature looks amazing, thanks!

So I see that this is merged but it's apparently not recognized in d3 v7.8.5 (linkHorizontal().curve is not a function), am I supposed to do something else to use this?

Fil commented 12 months ago

As is documented in https://d3js.org/d3-shape/link, the feature was merged with the API d3.link(d3.curveBumpY), not linkHorizontal().curve() (the change was in https://github.com/d3/d3-shape/pull/177/commits/02ba973eb20a41847cf72ea94a65e9bda738b843, in this PR).

roipoussiere commented 12 months ago

Thank you!

Any change to have the curveStep with smooth angles as suggested in https://github.com/d3/d3-shape/pull/177#issuecomment-809936541?

It could be very useful! I can create a new issue for this if necessary.

Fil commented 12 months ago

Yes please create an issue. Here's supporting code that connects points with a Bézier curve: https://observablehq.com/@d3/curvebezier--dev