удаление объекта svg после перехода

Question

удаление объекта svg после перехода

1

У меня есть набор путей, которые исчезают после того, как пользователь нажимает на элемент. Я делаю это с переходом и непрозрачностью

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

После того, как объект исчезает, и переход завершается, как я могу удалить путь со страницы.

Tommie Jones 03 нояб. 2017, в 17:20

Источник

Теги:

javascript

d3.js

2 ответа

1

Чтобы добавить к тому, что сделал Андрей выше.remove(), всегда вызывается в конце переходного шаблона обновления Bostock General. Таким образом, альтернативная функция перехода может быть:

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

pmkro 03 нояб. 2017, в 18:17

Ещё вопросы

Andrew Reid · Accepted Answer · 2017-11-03T15-18-00.000Z

Вы должны иметь возможность использовать 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>