Question

我是d3 javascript库的新手。我正在尝试使用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");

https://jsfiddle.net/c58859xy/

Answer 1

简而言之：你不能将一个线元素附加到一个圆元素。

创建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");

这是更新的小提琴：https://jsfiddle.net/c58859xy/1/

d3 javascript在圆圈上绘制线条

1 个答案: