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

**URL:** <https://talk.observablehq.com/t/replacing-linkhorizontal-with-a-curvedstep-line-in-a-tree/4839>\
**Category:** Help\
**Created:** [March 28, 2021, 7:36pm UTC](https://talk.observablehq.com/t/replacing-linkhorizontal-with-a-curvedstep-line-in-a-tree/4839 "2021-03-28T19:36:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RyKilleen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rykilleen/32/4745_2.png) [@RyKilleen](https://talk.observablehq.com/u/RyKilleen)\
**Post date:** [March 28, 2021, 7:36pm UTC](https://talk.observablehq.com/t/replacing-linkhorizontal-with-a-curvedstep-line-in-a-tree/4839/1 "2021-03-28T19:36:55Z")

</div>

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

Consider this example: [Collapsible Tree / D3 / Observable](https://observablehq.com/@d3/collapsible-tree)

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!

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [March 28, 2021, 11:35pm UTC](https://talk.observablehq.com/t/replacing-linkhorizontal-with-a-curvedstep-line-in-a-tree/4839/2 "2021-03-28T23:35:07Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands).

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, …

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [March 29, 2021, 12:00am UTC](https://talk.observablehq.com/t/replacing-linkhorizontal-with-a-curvedstep-line-in-a-tree/4839/3 "2021-03-29T00:00:23Z")

</div>

For example:

> **[Collapsible Tree / Jacob Rus / Observable](https://observablehq.com/d/15eb4a59f6cc5746?ui=classic)**
>
> Explore and visualize data. Share and publish your insights. Discover and be inspired.

```javascript
curvestep = d3.line().curve(d3.curveStep).x(d => d.y).y(d => d.x)

```

```javascript
diagonal = ({source, target}) => curvestep([source, target])

```

---

<div class="post-metadata">

**Author:** ![RyKilleen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rykilleen/32/4745_2.png) [@RyKilleen](https://talk.observablehq.com/u/RyKilleen)\
**Post date:** [March 29, 2021, 4:46pm UTC](https://talk.observablehq.com/t/replacing-linkhorizontal-with-a-curvedstep-line-in-a-tree/4839/4 "2021-03-29T16:46:40Z")

</div>

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!