d3.js：データをバインドして要素を入力した後に属性設定が機能しない

Question

私は最初からD3.jsを学んでいます。しかし、私が読んでいるチュートリアルのEntering Elementのセクションでは、記事の場合と同じ結果を得ることができません。

svg.selectAll("circle") 
    .data([32, 57, 112, 293]) 
    .enter().append("circle") 
    .attr("cy", 60) 
    .attr("cx", function(d, i) { return i * 100 + 30; }) 
    .attr("r", function(d) { return Math.sqrt(d); }); 

は、データを結合素子に入射し、circleもう一つを追加した後、唯一の設定属性は、添付circle、全ての円上に塗布しました。

私はここにcodepenを添付しました。

この動作は正常ですか、何か誤解していますか？

Answer 1

はい、これは正常な動作です。ここにあなたの問題があります：すでにSVGに3つの円があります。したがって、データをバインドすると、「入力」選択には1つのサークル（4番目のサークル）があり、すべての属性はこの最後のサークルに対してのみ設定されます。

入力/更新/終了の選択は、データと要素の関係に基づいています。あなたのデータ（配列の4つの数字）をバインドすると、すでにSVGに3つの要素があります。したがって、あなたは持っています：

• 選択を入力：任意の要素に対応していないデータ。あなたの場合は、1円です。

• 更新選択：要素に対応するデータ。あなたの場合、3つのサークル。

• 終了選択：要素には対応していません。あなたの場合、円はゼロです。あなたが「入力」の両方の属性を設定し、

  var svg = d3.select("svg"); 
  
  var myCircles = svg.selectAll('circle') 
      .data([32, 57, 112, 293]);//binds the data 
  
  myCircles.enter().append("circle");//enter selection 
  
  myCircles.attr("cy", 60) 
      .attr("cx", function (d, i) { 
       return i * 100 + 30; 
      }) 
      .attr("r", function(d) { 
       return Math.sqrt(d); 
      });//updates all circles 
  

  は、このような操作：

はすべて4円（前3と1新）を再描画するには、このような何かをしなければなりません「更新」の選択が含まれます。ここでは、あなたの更新ペン（私はあなたが変更する前に、元の3円を参照するだけのために、1秒のsetTimeoutメソッドを置く）です： http://codepen.io/anon/pen/vKxZxX

私はボストックのチュートリアルで、あなたのコードを比較し、または何を言っていませんのでご注意くださいあなたは「間違っていた」。私はあなたのコードが4つのサークルを更新しない理由を単に説明しています。