d3の各ポイントにデータを割り当てる

Question

データベースからCXポイントとCYポイントの円をプロットしました。これらのポイントのそれぞれにclickイベントを付けました。 クリックでは動作しますが、円は最後のインデックスのみを使用します。 ポイントによってインデックスが変わらない データはデータベースのtempdataにあります また、ブラウザのコンソールで「d」を押すと、サークルのプロットされた画像の属性が表示され、サークルの属性は表示されません。

var removeRect = function(idCircle){ 
     //d3.selectAll('g #'+id).remove(); 
    console.log("index : " + JSON.stringify(idCircle)); 
};  

for(var i=0; i< tempdata.length; i++) 
    { 
     var name = "circle"+i; 

     d3.select("#floor svg") 
      .append("svg:circle") 
      .attr("stroke", "black") 
      .attr("fill", "green") 
      .attr("r", 5) 
      .attr("cx", tempdata[i].CX) 
      .attr("cy", tempdata[i].CY) 
      .attr("idCircle",name) 
      //.attr('onclick',"removeRect('circle_"+name+"')") 
      //.on("click", removeRect(name)) 
      .on("click", function(d,index){ 
       console.log("d" + JSON.stringify(d)); 
       removeRect(name); 
      })   

     hashtemp[i]="#"+i; 

/*  d3.select(hashtemp[i]) 
      .on("click", function(d,index) { 
       console.log("index : " + JSON.stringify(d)); 
      var summarydata = ""; 
        $('#myModal').modal('show'); 
        $scope.selected_marker = tempdata[index]; 
        console.log(tempdata[index]); 
        } 
       ) */ 

    } 

Answer 1

あなたは「D3方法」を実行していません。 D3は任意のデータを任意の要素に束縛することができるので、ループは必要ありません。 d3に、これらの要素（存在する場合と存在しない場合がある）にこのデータ配列をバインドし、現在のデータとインデックスに基づいて属性を割り当てたいことを伝えるだけです。

d3.select("#floor svg").selectAll('circle') 
    .data(tempdata).enter() 
     .append("svg:circle") 
     .attr("stroke", "black") 
     .attr("fill", "green") 
     .attr("r", 5) 
     .attr("cx", (d,i)=>tempdata[i].CX) 
     .attr("cy", (d,i)=>tempdata[i].CY) 
     .attr("idCircle",(d,i)=>'circle'+i) 
     //.attr('onclick',"removeRect('circle_"+name+"')") 
     //.on("click", removeRect(name)) 
     .on("click", function(d,index){ 
      console.log("d" + JSON.stringify(d)); 
      removeRect(name); 
     })   

編集：それは働いたselectAll('circle')