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（）;

由于选择中的每个项目都存在转换，因此结束函数会在每次转换结束时触发，因此您可以在转换结束时使用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();   
}

转换后删除svg对象

2 个答案: