javascript - 将数据分配给 d3 中的每个点

Question

我已经从数据库中绘制了 CX 和 CY 点的圆圈我在这些点上添加了点击事件。单击有效，但圆圈仅采用最后一个索引。索引不随点变化数据位于数据库的 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 可以将任意数据绑定(bind)到任意元素，因此不需要循环。只需告诉 d3 您想要将这个数据数组绑定(bind)到这些元素(可能存在也可能不存在)，然后根据当前数据和索引分配属性即可。

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