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

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

以下是一小段代码。

horas$: Observable<Horas[]>;

this.horas$ = this.proyecto$
    .pipe(
        concatMap(proyecto => ...)
    )

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

仅供参考，我的项目使用的是 d3v5。

尝试过的方法： #1.

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

.call(d3.drag()
.on("interrupt",function() { timeline_svg.interrupt();})

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

解决方法

您需要在拖动时使用 selection.interrupt()：

var svg = d3.select("svg");

var circle = svg.append("circle")
  .attr("r",20)
  .attr("cx",100)
  .attr("cy",100)
  .attr("fill","crimson")
  
circle.transition()
  .attr("cx",300)
  .attr("fill","steelblue")
  .duration(5000)
  
var drag = d3.drag()
  .on("start",function() {
    d3.select(this).interrupt()
  })
  .on("drag",function() {
    d3.select(this)
      .attr("cx",d3.event.x)
      .attr("cy",d3.event.y)
  })

circle.call(drag);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width = 500 height=300></svg>

您几乎可以在两种方法之间找到它。

由于多种原因，您的第一种方法不起作用：transition.on() 具有事件类型“中断”，但 d3-drag 没有；但是在你使用selection.interrupt()之前不会触发中断事件，监听中断触发中断是把马放在车前。

您的第二种方法不起作用，因为您没有设置新的过渡：selection.transition.duration(0) 应该是 selection.transition().duration(0);

var svg = d3.select("body").append("svg");
var circle = svg.append("circle")
  .attr("cx",50)
  .attr("cy",50)
  .attr("r",10)
  
circle.transition()
  .attr("cx",200)
  
circle.transition
  .duration(0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>