javascript - D3.js:暂停按钮不起作用(在用于动画的回调函数中)

Question

我正在尝试向我的动画添加暂停和恢复的功能:

它显示了火车(黄色)在一条线上的位置。我的数据是嵌套的，其中关键是时间段。目前，它每 interval 毫秒调用一次 render(t) 函数。我读过this guide和 this question关于这一点，但我仍然不知道如何将其应用到我的案例中。

我想暂停动画，检查火车属性，然后恢复它。如有任何帮助，我们将不胜感激!

currentTime = 0;
interval = 100;
var trainsHolder = svg.append('g')

 function render(t){

    trains = trainsHolder
            .selectAll('circle')
            .data(nested_train_data[t], function(d){ return d.car_id})

    // enter
    trains
        .enter()
        .append("circle")
        .each(setAttributes)

    // update
    trains
        .transition()
        .duration(interval)
        .each(setAttributes)

    // exit
    trains.exit().remove();

    // update timer
    timer_holder
        .select("text")
        .transition()
        .duration(interval)
        // .text("Time : " + String(t/60))
        .text(String(nested_train_data[t][0].Date.getHours()) + ":"  + String( nested_train_data[t][0].Date.getMinutes()))

    };

render(currentTime);

var callback = function () {
        return function () {
// my time increments are 60 seconds

            currentTime = currentTime + 60; 
            // console.log(currentTime);
            if (currentTime <= maxTime) {
                render(currentTime);
                d3.timer(callback(), interval);
            }
            return true;
        }
    }



    d3.timer(callback(), interval);
// NOT WORKING
$("#pauseBtn").click(function() {
        trainsHolder.selectAll('circle').transition().duration( 0 );
      });

Answer 1

去掉图片中的“暂停”，动画是否正常运行？如果是这样，问题似乎出在您的回调函数上。这就是动画的驱动力。

你想要类似下面的东西。基本思想是，当且仅当模拟未暂停且未超过 maxTime 时，才提前动画计时器:

return function(elapsed) {
    paused = getPausedState();
    //use the elapsed time to set instead of a fixed interval, so the animation plays at a constant rate
    //only advance the animation timer if the simulation is not paused
    //and we haven't exceeded the max
    nextTime = paused || currentTime > maxTime ? currentTime : currentTime + elapsed;
    render(nextTime);
    d3.timer(callback(), interval);