title: All circle elements stuck behind each other
body: <p>I'm trying to append circles that have a color background with an image attached. </p>
  
  <p>To achieve that am using <code>&lt;defs&gt;</code>, <code>&lt;rect&gt;</code> <code>&lt;clipPath&gt;</code> and <code>&lt;use&gt;</code>. I believe that my SVG hierarchy is valid, however even though all elements have a <strong>unique ID</strong> all circles are got stuck in the same point. All <code>&lt;a&gt;</code> elements itself that contain defs in it are having different <strong>x</strong> and <strong>y</strong>, but rects inside it are having same <strong>x</strong> and <strong>y</strong>. </p>
  
  <p>How is it possible that all rects having a unique ID having same x's and y's.</p>
  
  <p><a href="https://codepen.io/edgarkiljak/pen/OaYgLY?editors=1010" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>DOM screenshot: </p>
  
  <p><a href="https://i.stack.imgur.com/gOY8Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gOY8Q.png" alt="enter image description here"></a></p>
  
  <pre><code> let personCircles = svg.selectAll("a")
              .data(data)
              .enter()
              .append("a")
              .attr("id", function(d) {
                  console.log(d["Person Name"]);
                  if (d &amp;&amp; d.length !== 0) {
                      return d["Person Name"].replace(/ |,|\./g, '_');
                  }
              })
              .attr('x', function(d) {
                      return markerCirclesScale(name)
                  })
                  .attr('y', function(d) {
                      return fullSVGHeight / 2 + 8;
                  })
              .style("opacity", 1)
              .call(d3.drag()
                  .on("start", dragstarted)
                  .on("drag", dragged)
                  .on("end", dragended));
  
  
  
  
          //Define defs 
          let defs = personCircles.append("defs");
  
          defs.append('rect')
              .attr('id', function(d) {
                      return "rect-" + d["Person Name"].replace(/ |,|\./g, '_');
              })
              .attr('x', function(d) {
                  return markerCirclesScale(name)
              })
              .attr('y', function(d) {
                  return fullSVGHeight / 2;
              })
              .attr('width', 60)
              .attr('height', 60)
              .attr('rx', 40)
              .style('fill', 'red')
  
  
          defs.append("clipPath")
             .attr('id', function(d) {
                      return "clip-" + d["Person Name"].replace(/ |,|\./g, '_');
              })
              .append("use")
              .attr('href', function(d) {
                      return "#rect-" + d["Person Name"].replace(/ |,|\./g, '_');
              })
  
           personCircles
                  .append("use")
                  .attr('href', function(d) {
                      return "#rect-" + d["Person Name"].replace(/ |,|\./g, '_');
              })
              personCircles.append('image')
                  .attr('href', function(d) {
                      return 'http://pngimg.com/uploads/donald_trump/donald_trump_PNG72.png'
                  })
                  .attr("clip-path", function(d) {
                      return "url(#clip-" + d["Person Name"].replace(/ |,|\./g, '_');+")"
                  })
                  .attr('x', function(d) {
                      return markerCirclesScale(name)
                  })
                  .attr('y', function(d) {
                      return fullSVGHeight / 2 + 8;
                  })
                  .attr("width", 60)
                  .attr("height", 60)
  </code></pre>