D3v5：拖拽时如何中断正在执行的D3过渡？

此前尝试方案失效的核心原因 #

• D3 v5拖拽组件自带的interrupt事件，仅在拖拽行为本身被外部打断时触发，并非拖拽启动阶段的执行钩子，用它绑定中断逻辑完全匹配不到预期触发时机
• start.interrupt是拖拽事件的自定义命名空间语法，D3对带命名空间的同类型事件回调无固定执行优先级保障，很容易把该回调放到拖拽后续更新逻辑、新过渡启动逻辑之后执行，导致中断生效时新的过渡已经开始运行
• 仅给根SVG selection绑定interrupt()方法，无法覆盖子元素上独立绑定的过渡，容易出现漏中断的情况
• 动态修改全局过渡时长的方案，会无差别影响所有非交互场景的过渡效果，且无法中断已经在运行的过渡实例

正确实现逻辑 #

要实现拖拽启动瞬间立刻中断所有运行中过渡，不需要依赖拖拽组件的特殊事件钩子，只需要调整逻辑的执行时序和覆盖范围：

• 移除所有带自定义interrupt命名空间的拖拽事件绑定，把中断逻辑直接写在拖拽start事件回调的最开头，优先于所有后续拖拽状态计算、页面更新逻辑执行
• 中断范围覆盖根SVG容器及其所有子节点，确保所有绑定在SVG内部元素上的运行中过渡都会被同步拦截
• 不修改全局过渡时长配置，避免影响非交互场景的默认过渡效果

可直接参考的调整后代码 #

timeline_svg.append("line")
.attr("class", "track")
.attr("x1", x.range()[0] + 135 - marginTimeAxis)
.attr("x2", x.range()[1] + marginTimeAxis)
.attr('y1', 10)
.attr('y2', 10)
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-inset")
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-overlay")
.call(d3.drag()
    .on("start", function() {
        // 拖拽启动第一时间执行中断，优先于所有后续逻辑
        timeline_svg.interrupt();
        // 兜底中断所有子元素的运行中过渡
        timeline_svg.selectAll("*").interrupt();
    })
    .on("drag", function() {
        currentValue = d3.event.x;
        console.log("current value:-> ", currentValue);
        update(t.invert(currentValue)); 
    })
);

补充说明：D3 v5的selection.interrupt()为同步执行方法，只要放在start回调的第一行，就会在拖拽触发更新、启动新过渡之前，把对应元素上所有正在运行的过渡全部停止，从根本上避免拖拽时旧过渡未中断导致的视觉跳变问题。

内容的提问来源于stack exchange，提问作者Aztec-3x5