サークルオブジェクトがSVGコンテナの左上隅に表示されるのはなぜですか？

Question

以下のコードは、コンテナの左上隅に位置する円を生成します。私はそれが配列の値に対応する位置にあることを望みます。 DOMここ

<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> 

です： ここでは、コードです

そして、これが結果です：

Answer 1

P SVGには存在しないcXとcYの使用があります。属性はcxとcyで、小文字です。

ので、この：

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

あなたは左上隅（SVGの原点）でのSVG要素を取得するたびに、NaNや他の容疑者：

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

は、このあるべき（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>