how to use d3.js v7 to draw tree line

Community Help
1

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:

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.

2

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

3

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:

图片
图片858×85 8.85 KB

4

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.