D3.js 为创建的每个元素指定新的id属性

如何将id属性指定给圆的每个附加项，以便以后可以根据其id使用圆。现在，我可以在拖动时克隆圆，而不需要任何id

演示：

代码：

---

如果要为每个圆指定唯一的id，可以使用函数为每个圆生成GUID/UUID“全局唯一标识符”

可以在拖动函数之前的任意位置将以下函数从添加到代码中：

function guid() {
    function _random_letter() {
        return String.fromCharCode(97+Math.floor(Math.random() * 26));
    }
    function _p8(s) {
        var p = (Math.random().toString(16)+"000000000").substr(2,8);
        return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : _random_letter() + p.substr(0, 7);
    }
    return _p8() + _p8(true) + _p8(true) + _p8();
}

我稍微修改了Salvik的原始函数，因为HTML元素ID以HTML4中的字母开头，或者在HTML5中至少包含一个字母

然后在添加新圆的地方，只需使用.attrid、guid为圆生成一个新id

var circle2 = d3.select("svg").append("circle")
    .attr("id", guid())  
    .classed("drg", true)
    ...

---

可以为使用索引创建的每个元素指定新的id属性：

   var circle2 = d3.select("svg").append("circle")
                                    .classed("drg", true)
                                    .attr("cx", 100)
                                    .attr("cy", 100)
                                    .attr("r", 20)
                                    .attr("cx", mouseCoordinates[0])
                                    .attr("cy", mouseCoordinates[1])
                                    .style("fill", "green");

    circle2.selectAll("circle").attr("id", function(d,i) { return i; });

---

尝试使用和对象数组来保存对象列表。这些对象可以是您想要的，映射是通过attr函数中的回调在中完成的。祝你好运这会生成不可选择的ID：错误：无法对“元素”执行“querySelector”：“5881847f-04d9-38fd-4c44-a420cdb1110a”不是有效的选择器。@从技术上讲，mangei ID必须以字母开头，或者在HTML 5中至少包含一个字母。我将修改guid函数以确保第一个字符是字母。简单明了

   var circle2 = d3.select("svg").append("circle")
                                    .classed("drg", true)
                                    .attr("cx", 100)
                                    .attr("cy", 100)
                                    .attr("r", 20)
                                    .attr("cx", mouseCoordinates[0])
                                    .attr("cy", mouseCoordinates[1])
                                    .style("fill", "green");

    circle2.selectAll("circle").attr("id", function(d,i) { return i; });