javascript - svg：clipPathを実装しようとしましたが、ほとんど空白の画面になってしまいました

Question

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

Answer 1

この例を見てください。ClipPath と setInterval: demoを含む行を適用します。