Javascript 中断D3转换：如何在拖动时中断正在进行的转换？

下面是一小段代码

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") //axis tAxis
.call(d3.drag()
    .on("start.interrupt", function() { timeline_svg.interrupt();})
    .on("start drag", function() {
    currentValue = d3.event.x;
    console.log("current value:-> ", currentValue);
    update(t.invert(currentValue)); 
    })
);    

在上面的代码中，每当我尝试启动拖动操作时间线时，都应该调用_svg.interrupt（），但这并没有发生。过渡不会被打断。我希望svg的转换在拖动时被中断

我在我的项目中使用d3v5

尝试过的方法： #一,

---

感谢您阅读我的帖子，我感谢您为此投入的时间和精力。

拖动时，您需要使用

selection.interrupt（）

：

var svg=d3.选择（“svg”）；
var circle=svg.append（“circle”）
.attr（“r”，20）
.attr（“cx”，100）
.attr（“cy”，100）
.attr（“填充”、“深红色”）
圆。过渡（）
.attr（“cx”，300）
.attr（“填充”、“钢蓝”）
.持续时间（5000）
var drag=d3.drag（）
.on（“开始”，函数（）{
d3.选择（此）.interrupt（）
})
.on（“拖动”，函数（）{
d3.选择（本）
.attr（“cx”，d3.event.x）
.attr（“cy”，d3.event.y）
})
圆圈。呼叫（拖动）

我在不同的图表上尝试了您的两种方法，它们往往在那里有效，但在我正在做的特定项目中无效。然而，如果这不是太多的要求，我们可以连接一个缩放电话来解决这个问题吗？因为有很多动画正在进行，我不能把所有的东西都放在一个帖子里。谢谢你的关注。如果可能的话，最好先看看你的代码。
.call(d3.drag()
.on("interrupt", function() { timeline_svg.interrupt();})

.call(d3.drag()
.on("start.interrupt", function() { timeline_svg.transition.duration(0);})