javascript - 为什么圆形对象位于 SVG 容器的左上角？

Question

下面的代码生成位于容器左上角的圆圈。我希望它位于与数组值对应的位置。 代码如下:

<script>
   var data = [ 30, 40, 50 ]

   var svg = d3.select("body").append("svg")
            .attr("width", 800)
            .attr("height", 500)
            .style("border", "3px solid black");

   var circles = svg.selectAll("g")
                    .data(data)
                    .enter()
                    .append("g");

   circles.append("circle")
          .attr("cX", function(d) { return d; })
          .attr("cY", function(d) { return d; })
          .attr("r", 50 )
          .style("fill", "steelblue")

   circles.append("text")
          .text( function(d) { return d; })

</script>

这是 DOM:

这就是结果:

Answer 1

这里的问题是使用了 cX 和 cY，它们在 SVG 中不存在。属性为小写的 cx 和 cy。

所以，这个:

circles.append("circle")
      .attr("cX", function(d) { return d; })
      .attr("cY", function(d) { return d; })
      .attr("r", 50 )
      .style("fill", "steelblue")

应该是这样的:

circles.append("circle")
      .attr("cx", function(d) { return d; })
      .attr("cy", function(d) { return d; })
      .attr("r", 50 )
      .style("fill", "steelblue")

每次您在左上角(SVG 原点)获取 SVG 元素时，都会怀疑 NaN 或设置位置属性的其他问题(x、y , x1, y1, x2, y2, cx, cy 等等...)。

这是您的代码，仅更改 cx 和 cy(并更改数据以将圆圈分散得更多):

   var data = [ 100, 200, 300 ]

   var svg = d3.select("body").append("svg")
            .attr("width", 400)
            .attr("height", 400)
            .style("border", "3px solid black");

   var circles = svg.selectAll("g")
                    .data(data)
                    .enter()
                    .append("g");

   circles.append("circle")
          .attr("cx", function(d) { return d; })
          .attr("cy", function(d) { return d; })
          .attr("r", 50 )
          .style("fill", "steelblue")

   circles.append("text")
          .text( function(d) { return d; })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>