🏠 back to Observable

Replacing linkHorizontal() with a curvedStep line in a tree?

Hi all, new to the community here and I appreciate your help in advance!

Consider this example: Collapsible Tree / D3 / Observable

I’m attempting to make the lines between the nodes resemble curveStep. As far as I can tell, I can’t pass a curve to any of the link generators. Do I need to replace linkHorizontal() completely with a line?

Any guidance is appreciated, thanks!

Right now the code there is setting .attr("d", diagonal);, where
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x).

This definition makes diagonal into a function which expects to be called with input arguments like:

diagonal({ source: {x: y0, y: x0}, target: {x: y1, y: x1} });

(Slightly confusingly it seems like diagonal is switching x and y, because in the data x is used for the vertical position and y for horizontal. I’m not entirely sure what that part is about.)

And then returns an svg path string.

Conceivably you can make diagonal into an alternative function which takes the same kind of inputs and then constructs any kind of svg path string you like, made up of any combination you can think of of straight segments, circular arcs, bezier curve pieces, …

1 Like

For example:

curvestep = d3.line().curve(d3.curveStep).x(d => d.y).y(d => d.x)
diagonal = ({source, target}) => curvestep([source, target])

Thank you so much for this! I was de-structuring source and target incorrectly, or passing them in the wrong shape to .line’s .x and .y

This is perfect, thank you!