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>

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

1 个答案: