Menu
How do I assign id attribute to each append of circle so that I can later use the circles based on its id. For now I am able to clone the circle on drag with out any id.
Demo: https://jsbin.com/zuxetokigi/1/edit?html,output
Code:
<!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>
704
If you want to give every circle a unique id, you could use a function to generate a GUID/UUID ('Globally Unique Identifier') for every circle.
You could add the following function from Salvik Meltser's GUID/UUID function to your code (anywhere before the drag function):
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();
}
I modified Salvik's original function a little bit because HTML element IDs need to start with a letter in HTML 4 or contain at least one letter in HTML 5.
And then where you append the new circle, just use .attr("id", guid()) to generate a new id for the circle.
var circle2 = d3.select("svg").append("circle")
.attr("id", guid())
.classed("drg", true)
...
You can assign new id attribute to each element created using its index:
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; });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
