我无法附加函数返回的svg元素

Question

我试图插入由函数返回的svg元素，但未成功。我究竟做错了什么？这是代码：

let svg = d3.select("body").append("svg")

function blackLine() {
    let line = d3.create("line")
        .attr("x1", 100)
        .attr("x2", 500)
        .attr("y1", 50)
        .attr("y2", 50)
        .attr("stroke", "black");
    return line.node();
}

function draw(){
    svg.append(blackLine);
    svg.append("line")
        .attr("x1", 100)
        .attr("x2", 500)
        .attr("y1", 100)
        .attr("y2", 50)
        .attr("stroke", "red");
}

draw();

在浏览器中，我可以看到红线，但看不到黑线。但是，这行是存在的：如果我检查渲染的页面，则会看到： Image of svg DOM in the browser debugger

如果我将黑色svg线的任何字段编辑为HTML（例如，将y2属性更改为70），则会显示该行！

对我来说，这似乎是个错误，但我可能做错了。有什么想法吗？