javascript - D3.js:圆形剪切路径不起作用？

Question

我对这个论坛有点陌生，我一直通过谷歌搜索使用它，这对我有很大帮助，但我认为我偶然发现了一个非常不寻常的问题。我正在尝试从圆形创建剪贴蒙版。我将代码(经过编辑以更具可读性)粘贴到此处，欢迎任何帮助。

结果应该是一个灰色圆圈，而不是我猜的黄色圆圈。

    var circles = svg.selectAll("circleMale")
        .attr("id", "ellipse-clip")
        .data(exhibits)
        .enter()
        .append("svg:circle")

        //.attr("title", function(d) { return nameFn(d); })
        //.attr("fill", "#CCCCCCC")
        .attr("fill", "#FFFF00")

        .attr("stroke-width", 3)
        .attr("stroke", "#FFFFFF")
        .attr("r",100)
        .attr("cx",500)
        .attr("cy",500)
        .attr("opacity", 0.2)

    var clippingPath = svg.append("rect")       
        .attr("x", 125)       
        .attr("y", 75)        
        .attr("clip-path", "url(ellipse-clip)") 
        .style("fill", "lightgrey")   
        .attr("height", 600)    
        .attr("width", 800);   

Answer 1

您有几个问题:

1. 剪辑路径必须指向 clipPath element ，不是圆

2. url(ellipse-clip) 不正确，应该是 url(#ellipse-clip)