移行後のsvgオブジェクトの削除

Question

ユーザーがアイテムをクリックした後に消えるパスのセットがあります。オブジェクトが消え遷移は、私がページからパスを削除するについて行くことができますどのように完了した後、私はトランジションと不透明度

let t0 = paths.transition().duration(2000).attrTween("d", arcTween) 
    .style("opacity", function(d) {return (d.class == "root") ? 0.0 : 1.0}) 
    .on("end", function(d) { 
      this._current = d; 
    }) 

でこれを行います。

Answer 1

あなたはselection.remove（）を使用できるはずです。

選択項目の各項目に遷移が存在するため、各遷移の最後にend関数がトリガされるため、遷移の最後にd3.select（this）.remove（）を使用してパスを削除できます/要素移行さ：

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",500) 
 
    .attr("height",300); 
 
    
 
var color = d3.scaleOrdinal(d3.schemeCategory20); 
 
    
 
var squares = svg.selectAll("rect") 
 
    .data(d3.range(20)) 
 
    .enter() 
 
    .append("rect") 
 
    .attr("y", function(d,i) { return Math.floor(i/5) * 40 + 10 }) 
 
    .attr("x", function(d,i) { return i%5 * 40 + 10; }) 
 
    .attr("width", 30) 
 
    .attr("height", 30) 
 
    .attr("fill",color) 
 
    .on("click",transition); 
 
    
 
    
 
function transition() { 
 
    d3.select(this).transition() 
 
    .attr("width", 10) 
 
    .attr("height", 10) 
 
    .on("end", function() { 
 
     d3.select(this).remove(); 
 
    }) 
 
    .duration(1000); 
 
    
 
    
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

Answer 2

アンドリューは.removeの上に何をしたかに上の追加するには、（）は常に移行Bostock's General Update Patternの終了時に呼び出されます。したがって、代替の遷移関数は次のようになります。

function transition() { 
    d3.select(this).transition() 
    .attr("width", 10) 
    .attr("height", 10) 
    .duration(1000) 
    .remove(); 
}