Question

如何为每个圆圈附加分配id属性，以便我以后可以根据其ID使用圆圈。现在我可以在没有任何id的情况下克隆拖动圈。

演示：https://jsbin.com/zuxetokigi/1/edit?html,output

代码：

 <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
        <script>
            svg = d3.select("body").append("svg")
                    .attr("width", 960)
                    .attr("height", 500);

            circle1 = svg.append("circle")
                    .attr("id", "circleToClone")
                    .attr("cx", 100)
                    .attr("cy", 100)
                    .attr("r", 20);

            var drag = d3.behavior.drag()
                    .origin(function ()
                    {
                        var t = d3.select(this);
                        return {x: t.attr("cx"), y: t.attr("cy")};
                    })

                    .on('dragend', function (d) {
                        var mouseCoordinates = d3.mouse(this);
                        if (mouseCoordinates[0] > 120) {
                            //Append new element
                            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");
                        }
                    });
            circle1.call(drag);
        </script>
    </body>
</html>

Answer 1

我不确定你为什么要这样做，但是如果你想给每个圈子一个唯一的id，你可以使用一个函数为每个圈子生成一个GUID / UUID（'全球唯一标识符'）。

您可以将Salvik Meltser's GUID/UUID function中的以下函数添加到您的代码中（drag函数之前的任何位置）：

function guid() {
    function _p8(s) {
        var p = (Math.random().toString(16)+"000000000").substr(2,8);
        return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;
    }
    return _p8() + _p8(true) + _p8(true) + _p8();
}

然后，在您添加新圈子的位置，只需使用.attr("id", guid())为圈子生成新ID。

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

Answer 2

您可以为使用其索引创建的每个元素分配新的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; });

为创建的每个元素分配新的id属性

2 个答案: