title: assign new id attribute to each element created
body: <p>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.</p>
  
  <p>Demo: <a href="https://jsbin.com/zuxetokigi/1/edit?html,output" rel="noreferrer">https://jsbin.com/zuxetokigi/1/edit?html,output</a></p>
  
  <p>Code:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;JSP Page&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              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] &gt; 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);
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>