我想該形狀

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; }); 

I已嘗試使用d3.scale，但它並沒有爲我工作

Answer 1

這可能比你要找的更簡單，但你有沒有使用clipPath？