javascript - 我想限制形状内的圆圈和该形状内的分区

Question

var svgcanvas = d3.select("body").append("svg:svg")
.attr("width", 725)
.attr("height", 500);

数据集

var jsoncirclehigh = [
                   {cx:100, cy: 100, r: 2.5,
                    label:"technology"},
                   {cx:200, cy: 200, r: 2.5,
                    label:"rocks"},
                    {cx:50, cy:50, r:2.5,
                        label:"blah"}
                 ];

我创建的实际形状

  svgcanvas.append("svg:path")
        .attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0") 
        .attr("transform", "translate(220,400) scale(1, -1)")
        .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "yellow");

我希望圆圈限制在上面的形状内

svgcanvas.selectAll("circle")
     .data(jsoncirclehigh)
     .enter().append("circle")
       .attr("r", function (d) { return d.r; })
       .attr("cx", function (d) { return d.cx; })
       .attr("cy", function (d) { return d.cy; })
       .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
       .on("mouseout", function() {d3.select(this).style("fill", "blue");})
       .style("stroke", "steelblue")
       .style("fill", "blue");

svgcanvas.selectAll("text")
   .data(jsoncirclehigh)
   .enter().append("svg:text")
    .text(function(d) { return d.label; })
    .attr("x", function (d) { return d.cx + 10; })
    .attr("y", function (d) { return d.cy + 10; });

我试过使用 d3.scale，但对我来说没用

Answer 1

这可能比您正在寻找的更简单，但您是否研究过使用 clipPath ？