javascript - 先进的 D3 转换测序；继承不同选择的转换延迟/持续时间

Question

我有前 n 名员工的排名数据，我想用它们来驱动可视化。我知道，因为显示的员工数量 n 永远不会改变，所以如果我使用复合(员工 + 排名)键函数更新数据联接，则进入和退出选择应始终包含相同数量的元素，并且我每当员工的级别发生变化时，都应该收到一个退出/进入的员工对。

现在我正在尝试为元素的退出和进入设置动画。使用 Bostock 先生在 d3: How to properly chain transitions on different selections 中描述的技术我可以链接两个转换，并将第一个转换应用于现有选择，将第二个转换应用于输入选择，以对不同选择进行排序转换。

当我尝试用子过渡来修饰退出过渡时(例如，将退出过渡变成由文本补间和背景过渡组成的两部分链式过渡)，问题就出现了。由于输入转换不知道退出转换中的子转换数量(也不知道延迟/持续时间)，因此我必须手动计算输入转换延迟/持续时间。此外，我要么必须根据数据计算子转换的延迟/持续时间有多长，要么必须假设现有选择中每个元素上的每个转换可能的最长延迟/持续时间(例如，我必须假设子转换- 过渡到每个员工的补间文本是补间最长的员工姓名)。

由于我有相同数量的退出和进入元素，是否有某种方法可以像在相同元素上一样链接转换？ IE。使用相同的选择，我可以链接转换，以便后续转换继承延迟/持续时间，我可以使用相同大小的不同选择来执行此操作吗？基本上，我如何编写以下内容而无需估计延迟/持续时间？

function chart() {
  var scale = d3.scale.ordinal().rangeBands([0, 150], .5);
  return function(selection) {
    selection.each(function(data) {
      scale.domain(data);
      var svg = d3.select(this).selectAll('svg').data([data]);
      var svgEnter = svg.enter().append('svg');
        var g = svg.selectAll('g').data(function(d) {
          return d;
        }, function(d, i) {
          return d + i;
        }).attr('class', 'update');
      	var gExit = g.exit();
        var gEnter = g.enter().append('g').attr('class', 'enter').attr('transform', function(d) {
          return 'translate(150 ' + scale(d) + ')';
        });
        g.order();
        var gExitTransition = d3.transition().each(function() {
          var t0 = gExit.transition().delay(function(_, i) {
            return i * 100;
          }).duration(function(d) {
            return d.length * 250 / 5;
          });
          var t1 = t0.transition();
          var t2 = t1.transition();
          t0.select('text').tween('text', function(d) {
            var i = d3.interpolate(this.textContent.length, 0);
            return function(t) {
              this.textContent = d.slice(0, i(t));
            };
          });
          t1.select('rect').attr('y', scale.rangeBand() / 2).attr('height', 1e-6);
          t2.remove();
        });
        var gEnterTransition = gExitTransition.transition().each(function() {
          var t0 = gEnter.transition().delay(function(_, i) {
            return i * 100 + 500;
          });
          var t1 = t0.transition().duration(function(d) {
            return d.length * 250 / 5;
          });
            var rectEnter = gEnter.append('rect').attr('y', scale.rangeBand() / 2).attr('width', 50).attr('height', 1e-6).style('fill', 'rgba(0, 0, 0, .1)');
            t0.select('rect').attr('y', 0).attr('height', scale.rangeBand());
            var textEnter = gEnter.append('text').attr('y', scale.rangeBand() / 2).style('alignment-baseline', 'middle');
            t1.select('text').tween('text', function(d) {
              var i = d3.interpolate(this.textContent.length, d.length);
              return function(t) {
                this.textContent = d.slice(0, i(t));
              };
            });
        });
    });
  };
}
var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('').map(function(c) {
  return d3.range(Math.floor(5 * Math.random()) + 1).map(function() {
    return c;
  }).join('');
});
var myChart = chart();
var selection = d3.select('body');
(function(f) {
  f();
  setInterval(f, 3000);
})(function() {
  selection.datum(d3.shuffle(alphabet.slice(0)).slice(0, 10).sort()).call(myChart);
});

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

Answer 1

根据 Gerardo 的建议，我切换到 v4，得到了部分解决方案；它有效并避免了计算不同选择之间的时间/持续时间的需要，但我基本上等待第一个选择上的转换的开始事件，然后过滤第二个选择上的转换，直到元素索引相等，这感觉非常愚蠢。

function chart() {
  var scale = d3.scaleBand().range([0, 150]).padding(.5);
  return function(selection) {
    selection.each(function(data) {
      scale.domain(data);
      var svg = d3.select(this).selectAll('svg').data([data]);
      var svgEnter = svg.enter().append('svg');
      svg = svg.merge(svgEnter);
        var g = svg.selectAll('g').data(function(d) {
          return d;
        }, function(d, i) {
          return d + i;
        }).attr('class', 'update');
      	var gExit = g.exit().attr('class', 'exit');
        var gEnter = g.enter().append('g').attr('class', 'enter').attr('transform', function(d) {
          return 'translate(150 ' + scale(d) + ')';
        });
        g = g.merge(gEnter).order();
          var rectEnter = gEnter.append('rect').attr('y', scale.bandwidth() / 2).attr('width', 50).attr('height', 1e-6).style('fill', 'rgba(0, 0, 0, .1)');
          var textEnter = gEnter.append('text').attr('y', scale.bandwidth() / 2).style('alignment-baseline', 'middle');
          var t0 = gExit.transition().delay(function(_, i) {
            return i * 100;
          });
          t0.select('text').duration(function(d) {
            return d.length * 250 / 5;
          }).tween('text', function(d) {
            var i = d3.interpolate(this.textContent.length, 0);
            return function(t) {
              this.textContent = d.slice(0, i(t));
            }.bind(this);
          });
          var t1 = t0.transition();
          t1.select('rect').attr('y', scale.bandwidth() / 2).attr('height', 1e-6);
          var t2 = t1.transition().on('start', function(d, i) {
            var t3 = gEnter.transition(d3.active(this)).filter(function(_, j) {
              return i === j;
            });
            t3.select('rect').attr('y', 0).attr('height', scale.bandwidth());
            var t4 = t3.transition();
            t4.select('text').duration(function(d) {
              return d.length * 250 / 5;
            }).tween('text', function(d) {
              var i = d3.interpolate(this.textContent.length, d.length);
              return function(t) {
                this.textContent = d.slice(0, i(t));
              }.bind(this);
            });
          });
          t2.remove();
    });
  };
}
var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('').map(function(c) {
  return d3.range(Math.floor(5 * Math.random()) + 1).map(function() {
    return c;
  }).join('');
});
var myChart = chart();
var selection = d3.select('body');
(function(f) {
  f();
  d3.interval(f, 3000);
})(function() {
  selection.datum(d3.shuffle(alphabet.slice(0)).slice(0, 10).sort()).call(myChart);
});

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