所有圆形元素都相互粘在一起

Question

I'm trying to append circles that have a color background with an image attached.

To achieve that am using <defs> , <rect> <clipPath> and <use> . I believe that my SVG hierarchy is valid, however even though all elements have a unique ID all circles are got stuck in the same point. All <a> elements itself that contain defs in it are having different x and y , but rects inside it are having same x and y .

How is it possible that all rects having a unique ID having same x's and y's.

Codepen

DOM screenshot:

 let personCircles = svg.selectAll("a")
            .data(data)
            .enter()
            .append("a")
            .attr("id", function(d) {
                console.log(d["Person Name"]);
                if (d && 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)

Answer 1

personCircles refers to the <a> ( anchor ) elements which wouldn't move an inch if you set x and y co-ordinates within a SVG. The elements you're trying to position are the rect s and the corresponding image s and so changing the ticked function to the following ie positioning the rect s, clipPath rect s and the image :

function ticked() {
    personCircles.selectAll('rect, image') 
        .attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });
}

the result would be as seen in the following fork of your codepen:

https://codepen.io/anon/pen/aPOdON?editors=1010

Hope this clears up. Btw I like the sample image you're using in your testing :P