Question

我正在尝试移动一些条形以创建一些空间，然后出现条形图（事件A）。我这样做有一个规则：与悬停栏相邻的栏将根据它们的接近程度而移动。他们将在mouseout（事件B）回到原来的位置。两个事件都通过获取当前位置并添加或减去它来计算新位置。

我已经掌握了基础知识。但是有一个棘手的情况：从BAR1和Mouseover到BAR2的Mouseout可能会发生得太快。它如下：

鼠标悬停BAR5，事件A1开始和平静结束。 BAR6被替换。
Mouseout BAR5，事件B1开始。 BAR6正在回到原来的位置。
（在B1完成之前）鼠标悬停Bar4，事件A2开始。

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

以下是我尝试这样做的方法：

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

这是JSFiddle。在这里创建/观察问题相当困难。你只需要上下刷光标一段时间。

我尝试过：

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

非常感谢任何解决方案的方法！

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

0 个答案: