gpt4 book ai didi

d3.js - 为每个创建的元素分配新的 id 属性

转载 作者:行者123 更新时间:2023-12-01 10:39:29 24 4
gpt4 key购买 nike

如何将 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>

最佳答案

如果你想给每个圆圈一个唯一的 id,你可以使用一个函数为每个圆圈生成一个 GUID/UUID('全局唯一标识符')。

您可以从 Salvik Meltser's GUID/UUID function 添加以下函数到您的代码(在 drag 函数之前的任何位置):

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 need以 HTML 4 中的字母开头或至少包含 HTML 5 中的一个字母。

然后在添加新圆圈的地方,只需使用 .attr("id", guid())为圆圈生成一个新的 id。
var circle2 = d3.select("svg").append("circle")
.attr("id", guid())
.classed("drg", true)
...

关于d3.js - 为每个创建的元素分配新的 id 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31381129/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com