Javascript d3在圆上画线

我是D3JavaScript库的新手。我试着用d3画一条圆上的线。我可以创建圆，但不知何故，圆上并没有线条。请参阅随附的示例代码。非常感谢您的帮助

diag_circles.data(circle_data)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                console.log("d.x", d.x);
                return d.x
            })
            .attr("cy", function (d) {
                return d.y
            })
            .attr("r", function (d) {
                return d.r
            })
            .append('line')
            .attr("x1", function(d){return d.x- d.r})
            .attr("y1", function(d){return d.y})
            .attr("x2", function (d) { return d.x+ d.r})
            .attr("y2", function(d){return d.y})
            .attr("stroke-width", 20)
            .attr("stroke", "black");

简而言之：不能将直线元素附加到圆元素

创建SVG时，您必须知道哪些元素允许附加子元素，以及它们可以有哪些子元素

解决方案：您必须将这些行附加到SVG：

var lines = svg.selectAll('line')
    .data(circle_data)
    .enter()
    .append("line")
    .attr("x1", function(d){return d.x- d.r})
    .attr("y1", function(d){return d.y})
    .attr("x2", function (d) { return d.x+ d.r})
    .attr("y2", function(d){return d.y})
    .attr("stroke-width", 20)
    .attr("stroke", "black");

下面是更新的fiddle:

简而言之：不能将line元素附加到circle元素

创建SVG时，您必须知道哪些元素允许附加子元素，以及它们可以有哪些子元素

解决方案：您必须将这些行附加到SVG：

var lines = svg.selectAll('line')
    .data(circle_data)
    .enter()
    .append("line")
    .attr("x1", function(d){return d.x- d.r})
    .attr("y1", function(d){return d.y})
    .attr("x2", function (d) { return d.x+ d.r})
    .attr("y2", function(d){return d.y})
    .attr("stroke-width", 20)
    .attr("stroke", "black");

以下是更新的小提琴：