Question

我正在尝试添加带有彩色背景并附加了图像的圆圈。

要使用<defs>，<rect> <clipPath>和<use>来实现。我相信我的SVG层次结构是有效的，但是，即使所有元素都具有唯一ID ，所有圆圈也会卡在同一点。所有其中包含def的<a>元素本身具有不同的 x 和 y ，但是内部的矩形具有相同的 x 和 y 。

所有具有唯一ID且具有相同x和y的矩形的可能性如何。

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>（锚定）元素，如果您将x和y设置为SVG中的纵坐标。您要定位的元素是rect和相应的image，因此将ticked函数更改为以下内容，即放置rect s，clipPath { {1}}和rect：

image

结果将显示在您的Codepen的以下分支中：

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

希望这可以清除。顺便说一句，我喜欢您在测试中使用的示例图像：P

所有圆圈元素都相互紧贴

1 个答案: