Question

我一直在尝试使用Mike Bostock的一般更新模式III（https://bl.ocks.org/mbostock/3808234）来实现变更动画我的代码似乎适用于D3v3。但是对于D3v4，它似乎延迟了转换。

演示（v3）：https://codepen.io/_wad1m/pen/BwewKg

相同演示（v4）：https://codepen.io/_wad1m/pen/VMOrxe

代码：

  // JOIN new data with old elements.
  var rects = layer1.selectAll('rect')
    .data( data, function(d) { return d.id; } );

  // EXIT old elements not present in new data.
  var removeElements = rects.exit();

  removeElements
    .attr("class", "remove")
    .transition(t)
      .attr('y', 300 )
      .attr('fill-opacity', 0 )
      .remove();

  // UPDATE old elements present in new data.
  var oldElements = rects.attr("class", "old")
    .transition(t)
      .attr('x', (d,i)=> i * barWidth );

  oldElements.filter(function(d,i,arr) 
  {
    var currentHeight = d3.select(this).attr('height');
    var newHeight = calcHeight( d );
    return Math.abs( currentHeight - newHeight ) > 0.1;
  } )
  .attr('class', 'change')
  .transition(t_quick)
      .attr('height', (d)=> (d.value/8)*300 )
      .attr('y', (d)=> 300-(d.value/8)*300 );

  // ENTER new elements present in new data.
  rects.enter().append('rect')  
    .attr("class", "new") 
    .attr('x', (d,i)=> i * barWidth )
    .attr('width', barWidth-2 )
    .attr('height', calcHeight )

    .attr('y', -300 )
    .attr('fill-opacity', 0 )
  .transition(t)
    .attr('y', (d)=> 300-(d.value/8)*300 )
    .attr('fill-opacity', 1 );

Answer 1

版本3 用法看起来无效。您正在呼叫var url = document.location.pathname; if (url.indexOf('/securepdf/') !== -1) { // there is securepdf on the url } else { // there isn't securepdf on the url }并传入现有转换。这是在版本4中添加的;来自CHANGE.md：

selection.transition方法现在采用可选的转换实例，可用于将新转换与现有转换同步。

因此，您看到的延迟是版本4的预期行为。要使其像版本3一样工作，请不要通过转换....

D3.js - v4中的转换行为是否发生了变化？

1 个答案: