2 
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 を使用してみましたが、うまくいきませんでした

4

1 に答える 1

1

これはあなたが探しているよりも単純かもしれませんが、clipPathの使用を調べましたか?

于 2012-09-30T23:26:10.927 に答える