how to use d3.js v7 to draw tree line

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 ="body")
                    .attr("width", 5*800)
                    .attr("height", 1800);

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

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

    const link = svg.selectAll('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.

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

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:

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.