D3.js複数のデータ項目のデータセットにバインドされた要素を1つだけ作成する方法

Question

5つのオブジェクトを持つデータセットがあります。それぞれのオブジェクトのSVGを作成しています。なぜなら、それぞれのオブジェクトの進行完了サークルを描画しているので、SVGキャンバスが必要なためです。テキスト要素をデータにバインドできるようにする必要がありますが、各オブジェクトに5つのテキスト要素を作成するのではなく、1つのテキスト要素を作成し、適切なインデックスを返すようにテキストフィールドを設定します。

D3はオブジェクトごとに1つの要素を描画するのではなく、どのようにして1つの要素しか描画しません（ただし、データにバインドされます）。コードは以下の通りです：

// Create svg for every data item 
    var svg = slideContainer.selectAll("svg").data(data); 
    svg.enter() 
     .append("svg") 
     .attr({ 
      "data-id": function (d, i) { return i; }, 
      "class": svgClass 
     }); 
    svg.exit().remove(); 

    var text = svg.selectAll("text").data(data, function (d) { return d.Margin; }); 
    text.enter() 
     .append("text") 
      .attr({ 
       "data-id": function (d, i) { return i; } 
      }) 
     .text(function (d) { 
      return data[$(this).attr("data-id")].Margin; 
     }); 
    text.exit().remove(); 
    text.transition().duration(750) 
         .attr({ 
          "x": 100, 
          "y": 100, 
          "fill": "white", 
          "class": function (d) { 
           if ($(this).attr("data-id") != $(this).parent().attr("data-id")) { 
            return "hide"; 
           } 
          }, 
          "id": "text" 
         }) 
         .text(function (d) { 
          return d.Margin; 
         }); 

Answer 1

あなたが持っているものは近いです。あなただけのコンテナを必要とするので、のようなあなたのコンテナにあなたのSVGを追加：あなたはあなたの進歩にそれを追加する場合を除き

var svgContainer = slideContainer.selectAll("svg").data(data).enter(); 

var progressBar = svgContainer.append("svg") 
     .attr({ 
      "data-id": function (d, i) { return i; }, 
      "class": svgClass 
     }); 


var progressBarText = svgContainer 
     .append("text") 
     //and so on 

svgContainer.exit().remove(); 

編集

バーSVG：

var progressBarText = progressBar.append('g') 
      .append("text") 
      //and so on. This will use the same data as the progress bar