# how to use d3.js v7 to draw tree line

**URL:** <https://talk.observablehq.com/t/how-to-use-d3-js-v7-to-draw-tree-line/8458>\
**Category:** Help\
**Created:** [November 7, 2023, 3:02am UTC](https://talk.observablehq.com/t/how-to-use-d3-js-v7-to-draw-tree-line/8458 "2023-11-07T03:02:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nancy](https://avatars.discourse-cdn.com/v4/letter/n/4af34b/32.png) [@Nancy](https://talk.observablehq.com/u/Nancy)\
**Post date:** [November 7, 2023, 3:02am UTC](https://talk.observablehq.com/t/how-to-use-d3-js-v7-to-draw-tree-line/8458/1 "2023-11-07T03:02:53Z")

</div>

Hi,  
I want to use d3.v7.js to draw a tree, nodes are drawn OK, but lines can not appear.  
I use the very common and basic method with d3.linkHorizontal(), but cannot find the reason why the lines are not OK.  
Codes are as below:

```js
function show_svg()
{
    const data = {
    "name": "name0",
    "children": [{
        "name": "name1"
    },
    {
    "name": "name2",
    "children": [{"name": "name3"},{"name": "name4" }]},
    {
    "name": "name5"
    },
    {
    "name": "name6",
    "children": [{"name": "name7" }, {"name": "name8"}]
    },
    ]};

    const dataSet = d3.hierarchy(data);
    const tree = d3.tree().size([300, 300])
    const nodes = tree(dataSet);
	var svg = d3.select("body")
                    .append("svg")
                    .attr("width", 5*800)
                    .attr("height", 1800);

    const node = svg.selectAll('.node')
       .data(nodes.descendants())
       .enter()
       .append('g')
       .attr('class', function (d) {
           return 'node' + (d.children ? ' node--internal' : ' node--leaf');
       })
       .attr('transform', function (d) {
           return 'translate(' + d.y + ',' + d.x + ')';
       });

    node.append('circle')
    .attr('r', 20)
    .attr('fill', "#69b3a2");

    const link = svg.selectAll('path')
    .data(nodes.links())
    .enter()
    .append('path')
    .attr('class', 'link')
    .attr('d', d3.linkHorizontal().x(d => d.y).y(d => d.x))
    .attr('stroke', '#999')
    .attr("stroke-opacity", 0.6);
}

```

* * *

Thanks for your reply.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [November 7, 2023, 7:48am UTC](https://talk.observablehq.com/t/how-to-use-d3-js-v7-to-draw-tree-line/8458/2 "2023-11-07T07:48:27Z")

</div>

I think you need to set the `fill` style (or property) of the links to `"none"`:

> **[Fix tree](https://observablehq.com/@recifs/fix-tree--support)**

---

<div class="post-metadata">

**Author:** ![Nancy](https://avatars.discourse-cdn.com/v4/letter/n/4af34b/32.png) [@Nancy](https://talk.observablehq.com/u/Nancy)\
**Post date:** [November 7, 2023, 9:51am UTC](https://talk.observablehq.com/t/how-to-use-d3-js-v7-to-draw-tree-line/8458/3 "2023-11-07T09:51:23Z")

</div>

## sorry to say that when I set `fill` style (or property) of the links to `"none"`

## .attr(“fill”, ‘none’)

it is so strange that line show is still not OK.  
Html source is like this:  
 ![图片](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/48794fea7acfd7f4fc7d574c8ccda5c6917abef4.png)

---

<div class="post-metadata">

**Author:** ![pstuffa](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pstuffa/32/837_2.png) [@pstuffa](https://talk.observablehq.com/u/pstuffa)\
**Post date:** [November 7, 2023, 3:38pm UTC](https://talk.observablehq.com/t/how-to-use-d3-js-v7-to-draw-tree-line/8458/4 "2023-11-07T15:38:08Z")

</div>

It looks like the path is not being interpolated correctly. Strange because your code is identical to what Fil put in a notebook.

If you have a notebook example, might be able to dig in more.