D3は異なる要素を追加し、共通のインデックスを保持する

Question

私のアプリは、データ型に応じてSVGに異なる要素を追加することになっています。私のコードこのような多かれ少なかれルックス：だから

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

var circles = elements.filter(function (d,i) { 
    return d.type == "category1" 
}) 
    .append("circle") 


var rectangles = smallCircles.filter(function (d,i) { 
      return d.type == "category2" 
     }) 
      .append("rect") 

data.typeは=「catgory1」場合、プログラムは、それが「カテゴリ2」に等しい場合、それは長方形を追加する必要があり、円を追加する必要があります。私が抱えている問題は、個々の指標（関数（d、i）の "i"）に基づいてSVG上の位置を設定していることです。しかし、そうするためには、これらの2つの要素型の間で一貫するインデックスのシーケンスが必要です。新しい要素が追加されるたびに++となる外部変数を使うよりも良い方法がありますか？

Answer 1

これを行う方法はいくつかあります。

まず、あなたは.eachを使用し、添付のロジックをカプセル化することができます：

var elements = svg.selectAll(".elements") 
    .data([ 
    { 
     type: "category1" 
    },{ 
     type: "category2" 
    } 
    ]) 
    .enter().append("g"); 

elements.each(function(d,i){ 

    // i is index on everything 

    var self = d3.select(this); 
    switch(d.type) { 
     case "category1": 
      self.append("circle"); 
      break; 
     case "category2": 
      self.append("rect"); 
      break; 
     default: 
      break; 
    } 
}); 

あるいは、第二、これを行うには良い方法は、あなたのデータのあなたの要素が一部にするために、次のようになります。

var data = [ 
    { 
     type: "category1" 
    },{ 
     type: "category2" 
    } 
    ]; 

data.forEach(function(d){ 
    switch(d.type) { 
     case "category1": 
      d.elem = "circle" 
      break; 
     case "category2": 
      d.elem = "rect" 
      break; 
     default: 
      break; 
    } 
}); 

var svg = d3.select('body').append('svg'); 

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

elements.append(function(d){ 
    return document.createElement(d.elem); 
});