1 
 var w = 725;

    var h = 500;

    var padding = 20;

     var svgcanvas = divElem.append("svg:svg")
        .attr("width", w)
        .attr("height", h);

我希望将区域限制到的路径，但元素已消失

 svgcanvas.append("svg:clipPath")
        .attr("id", "clipper")
        .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");

不希望线超出此路径但元素已消失

        var myLine = svgcanvas.append("svg:line")
        .attr("x1", 40)
        .attr("y1", 50)
        .attr("x2", 450)
        .attr("y2", 150)
        .attr("clip-path", "url(#clipper)")
        .style("stroke", "rgb(6,120,155)");

不希望圆圈超越这条路径，但元素已经消失

var circle = svgcanvas.selectAll("circle").data(jsoncirclehigh);

circle.enter().append('circle')
.attr('opacity',0)
.attr("cursor","pointer")
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function() {d3.select(this).style("fill", "orange");})
.attr("clip-path", "url(#clipper)")
.attr("cx", function(d) {return d.cx;})
.attr("cy", function(d) {return d.cy;});
4

1 回答 1

0

看这个例子，我应用了一个 ClipPath 和一个带有 setInterval 的行： demo

于 2012-10-02T16:06:43.910 回答