Working with Transitions

转换是动态操作

转换是从一个start状态转换为end的一个动态过程. 例如我们将页面的背景色从green转换为red.

d3.select('body')
  .style('background-color', 'green')
  .transition()
  .delay(1000)
  .style('background-color', 'red');

我们可以监听transition的start/end事件:

d3.select('body')
  .transition()
  .delay(1000)
  .on('start', function() { d3.select(this).style('background-color', 'green')})
  .style('background-color', 'red')
  .on('end', () => console.log('end...'));

更简单的方法在于使用类似styleTween/attrTween的方法(不确定是否常用):

d3.select('body').transition()
  .styleTween('background-color', () => d3.interpolate('green', 'red'));

针对d3.interpolate, 它需要知道给予参数的合理性(例如('green', 'red'), 则颜色从green过渡到red). 目前规则如下:

• numbers
• colors
• geometric transforms
• strings with embedded numbers(例如"96px")
  但如果是自己实现interplator, 则需要类似下列的写法: 保证t=0时候返回a, t=1时候返回b:

function interpolateNumber(a, b) {
  return function(t) {
    return a + t * (b - a);
  }
}

转换的生命周期

周期分为四个部分:

• 转换写入计划表
• 转换开始start
• 转换运行run
• 转换结束end
  当我们写selection.transition时候, 转换就写入计划表中. 则start在delay后面运行; 否则start会尽可能快的运行. 当执行run情况下, 它会重复调用t从0~1所返回的值. 当t=1的时候, 执行end操作.

实例: 在enter/update/exit中执行transition

    const width = 960;
    const height = 500;
    const x = d3.scalePoint()
      .domain([0, 1, 2])
      .range([height / 4, width - height / 4]);

    const svg = d3.select('svg');
    let circle = svg.selectAll('circle')
      .data([0, 1])
      .enter().append('circle')
      .attrs({
        r: height / 4,
        cx: x,
        cy: height / 2
      });

    setTimeout(() => {
      circle = circle.data([1, 2], d => d);
      circle.transition().duration(750)
        .attr('r', height / 3)
        .style('fill', 'orange');
      
      circle.enter().append('circle')
        .attrs({
          r: height / 4,
          cx: x,
          cy: height / 2
        })
        .style('fill', 'green');

      circle.exit().transition()
        .attrs({
          r: 1e-6,
          fill: 'red'
        })
        .remove();
    }, 1000)

• 使用d3.scalePoint, 将domain和range对应起来.
• 预先绘制[0, 1]两个黑色的圆圈, 以750毫秒的速度绘制[1, 2]两个圆圈, 半径调整为height / 3, 颜色设置为橘色.
• 将新增的2号圆圈, 半径设置为height / 4, 并且颜色为green.
• 将0号圆圈的半径设置为1e-6, 填充红色, 并删除.

源码

https://github.com/leicj/d3/blob/master/src/components/transition.js