D3.js 如何处理D3转换中不同的开始/结束关键帧

我试图移动一些条，为随后出现的条创建一些空间（事件A）。我这样做有一个规则：与悬停条相邻的条将根据它们的距离移动。它们将在鼠标离开后返回其原始位置（事件B）。这两个事件都通过获取当前位置并对其进行加减来计算新位置

我已经掌握了基本知识。然而，有一个棘手的情况：从BAR1滑鼠和从BAR2滑鼠可能发生得太快。内容如下：

鼠标越过BAR5，事件A1和平开始和结束。更换了BAR6

鼠标移出杆5，事件B1开始。BAR6正移回原来的位置

（B1完成之前）鼠标越过Bar4，事件A2开始

事件A1从DOM获取当前位置（如上所述），这意味着条形图将以不需要的方式移动，例如标签和条形图不再对齐

以下是我如何尝试做到这一点：

    svg.selectAll('rect')
    .on('mouseover', function() {
      var curr = this;
      var rects = d3.selectAll('.rect.FinalRank')
        .transition().duration(500);

      var ind = rects[0].indexOf(this);
      var arrLen = rects[0].length;

      rects.attr('y', function(d, i) {
          var gScale = d3.scale.pow().range([5, 0]);

          if (0 <= i && i < ind) {
            gScale.domain([0, ind])
              // //debugger
            return (+d3.select(this).attr('y') + gScale(ind - i))
          } else if (arrLen > i && i > ind) {
            gScale.domain([0, arrLen - ind - 1])
            return (+d3.select(this).attr('y') - gScale(i - ind))
          } else {
            return (d3.select(this).attr('y'))
          }
        });

      var dataObj = d3.select(this).datum();
    })

  .on('mouseout', function() {
    var curr = this;
    var rects = d3.selectAll('.rect.FinalRank')
      .transition('out').duration(500);

    var ind = rects[0].indexOf(this);
    var arrLen = rects[0].length

    var spaceGrad = d3.scale.pow().range([5, 0])

   rects.attr('y', function(d, i) {
      var gScale = d3.scale.pow().range([5, 0]);

      if (0 <= i && i < ind) {
        gScale.domain([0, ind])
          //debugger
        return (+d3.select(this).attr('y') - gScale(ind - i))
      } else if (arrLen > i && i > ind) {
        gScale.domain([0, arrLen - ind - 1])
        return (+d3.select(this).attr('y') + gScale(i - ind))
      } else {
        return (d3.select(this).attr('y'))
      }
    });

svg.selectAll（'rect'）
.on（'mouseover'，function（）{
var curr=此；
var rects=d3.selectAll（'.rect.FinalRank'）
.transition（）.持续时间（500）；
var ind=rects[0].indexOf（this）；
var arrLen=rects[0]。长度；
属性（'y'，函数（d，i）{
var gScale=d3.scale.pow（）.range（[5,0]）；
如果（0 i&&i>ind）{
gScale.domain（[0，arrLen-ind-1]）
返回（+d3.select（this.attr（'y'）-gScale（i-ind））
}否则{
返回（d3.select（this.attr（'y'））
}
});
var dataObj=d3.select（this）.datum（）；
})
.on（'mouseout'，function（）{
var curr=此；
var rects=d3.selectAll（'.rect.FinalRank'）
.过渡（“退出”）。持续时间（500）；
var ind=rects[0].indexOf（this）；
var arrLen=rects[0]。长度
var spaceGrad=d3.scale.pow（）.range（[5,0]）
属性（'y'，函数（d，i）{
var gScale=d3.scale.pow（）.range（[5,0]）；
如果（0 i&&i>ind）{
gScale.domain（[0，arrLen-ind-1]）
返回（+d3.select（this.attr（'y'）+gScale（i-ind））
}否则{
返回（d3.select（this.attr（'y'））
}
});

这是一个问题。很难在这里创建/观察问题。您只需上下移动光标一段时间

---

我所尝试的：

• 我尝试过使用中断信号。但是，当我创建一个日志来查看它是如何工作的时，我意识到我可以在不调用中断信号的情况下创建问题。虽然我不完全了解中断信号是如何工作的，但我认为解决方案并不存在
• 存储条的原始位置并始终将该变量传递给事件B是一个选项，但这听起来不是最优雅的解决方案

---

---

如果您能提供任何解决方案，我们将不胜感激。

A2启动时，请选择所有栏，将指针事件更改为

none

，并在A2结束时将其重新更改为

all

。@GerardoFurtado，谢谢！首先请注意问题中事件名称的混淆问题。下面我使用了新名称。您的建议有助于解决部分问题但是，当A2在A1运行时启动时，会出现类似的问题。我想如果滚动速度足够快，B1不会启动。你可以在最后一个JSFIDLE链接中复制这个，在本地也会更容易。我尝试过以类似的方式编辑A1，但它以某种方式阻止了其余的更改。有什么想法吗？更新以供将来参考。以下是为什么前面的建议对mouseover不起作用。将指针事件设置为none，用于选择的foo（）内的选择。on（'mouseover'，foo（））会发送mouseout信号。这是一个简单的示例来证明这一点。你是对的。这就是为什么我仅在“mouseout”内尝试将指针事件设置为“none”…但也没有成功。