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

Question

我正在嘗試添加帶有附加圖像的彩色背景的圓圈。

要實現這一點，請使用<defs> ， <rect> <clipPath>和<use> 。 我相信我的SVG層次結構是有效的，但即使所有元素都有唯一的ID，所有的圓圈都會卡在同一個點上。 所有包含defs的<a>元素本身都有不同的x和y ，但其中的rects具有相同的x和y 。

如何擁有具有相同x和y的唯一ID的所有rects。

Codepen

DOM截圖：

 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指的是<a> （ 錨點 ）元素，如果在SVG中設置x和y坐標，它們不會移動一英寸。 您嘗試定位的元素是rect和相應的image ，因此將ticked函數更改為以下內容，即定位rect s，clipPath rect和image ：

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

結果將在您的codepen的以下fork中看到：

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

希望這清除。 順便說一下，我喜歡您在測試中使用的樣本圖像：P