在滾動上按類刪除元素

Question

注意：我問這個問題是關於在滾動過程中中斷轉換的問題 ，但是現在我正在嘗試使用另一種技術，導致出現類似的問題，但該問題無法通過公認的（有效的）答案得到解決。

這次，我不想在每個繪圖函數中使用selection.remove() ，而不是用不透明度為0的所有圖初始化並具有一個單獨的函數來更改在每個步驟中調用的不透明度。 我想這樣做是為了使視線外的圖形不會妨礙我可能希望在當前圖形上進行的任何鼠標懸停交互。

例如，我有一些函數可以清除現有圖形，然后通過一些過渡繪制當前圖形：

var makeCircle0 = function() {
  d3.selectAll(".nancygraphs").interrupt().remove()
  g.append("circle")
    .attr("cx", 50)
    .attr("cy", 100)
    .attr("r", 20)
    .attr("fill", "red")
    .attr("id", "red")
    .attr("opacity", 0)
    .transition()
    .duration(1000)
    .attr("opacity", 1)
    .attr("class", "nancygraphs")
}

這些功能放在列表中

var activateFunctions = [];
activateFunctions[0] = makeCircle0;
activateFunctions[1] = makeCircle1;
activateFunctions[2] = makeCircle2;
activateFunctions[3] = makeCircle3;

根據步驟，調用該函數以繪制正確的圖形

function handleStepEnter(response) {
  console.log(response)
  step.classed('is-active', function(d, i) {
    return i === response.index;
  })

  figure.select('p').text(response.index);
  figure.call(activateFunctions[response.index]) // HERE!
}

這是一個jsfiddle來說明。 基本上，如果您快速來回滾動，則舊圖不會被清除，並且您會同時看到多個圖形。 為什么d3.selectAll(".nancygraphs").interrupt().remove()無法d3.selectAll(".nancygraphs").interrupt().remove()這項工作？

Answer 1

關於您的方法的三點觀察：

首先，根據d3 過渡手冊：

remove ：當過渡結束時，刪除選定的元素。

刪除不會中斷已經在運行的轉換-僅在所有轉換停止后才刪除。 更具體地說，它似乎在__transition__.count達到0時__transition__.count 。 您可以考慮在此處使用非d3移除實現，例如jQuery 。

其次，來自同一手冊：

中斷元素上的過渡不會影響任何后代元素上的任何過渡。 （...）因此，您必須中斷后代： selection.selectAll("*")

你應該叫做兩個中斷d3.selectAll(".nancygraphs").interrupt().selectAll("*").interrupt()

第三，將鼠標或滾動輸入直接耦合到邏輯絕不是一個好主意（當您直接將輸入事件耦合到例如附加轉換時，您可能進行了數千次）：您是否使用了防反跳功能？ 強烈建議使用lodash實現。

在嘗試了這些修改之后，我認為您當前的問題已解決。 如果不是，則進一步的調試方法是記錄/覆蓋元素的__transition__.count屬性。