D3.js 动画 过度属性

import * as D3 from 'd3'

export default class DThree {
  createSvg (result) {
    let svg = D3.select(result)
      .append('svg')
      .attr('width', '300')
      .attr('height', '300')
    let rect = svg.append('rect')
      .attr('width', 100)
      .attr('height', 30)
      .attr('x', 10)
      .attr('y', 10)
      .attr('fill', 'steelblue')
    let rectTran = rect.transition()
      .duration(2000)
      .attrTween('width', (d, i, a) => {
        return t => {
          return Number(a) + t * 300
        }
      })
    console.log(rectTran)
  }
  createSvgTwo (result) {
    let svg = D3.select(result)
      .append('svg')
      .attr('width', 300)
      .attr('height', 300)
    let rect = svg
      .append('rect')
      .attr('width', 100)
      .attr('height', 30)
      .attr('x', 10)
      .attr('y', 10)
      .style('fill', 'steelblue')
    let rectTran = rect.transition()
      .duration(2000)
      .style('fill', 'red')
    console.log(rectTran)
  }
  createTextSvg (result) {
    D3.select(result).append('svg').remove()
    let svg = D3.select(result)
      .append('svg')
      .attr('width', 500)
      .attr('height', 300)
    let rect = svg.append('rect')
      .attr('width', 100)
      .attr('height', 30)
      .attr('x', 10)
      .attr('y', 10)
      .style('fill', 'steelblue')
    let rectTran = rect.transition()
      .duration(2000)
      .attrTween('width', (d, i, a) => {
        return t => {
          return Number(a) + t * 300
        }
      })
    let text = svg.append('text')
      .attr('x', 100)
      .attr('y', 10)
      .text(100)
      .attr('dy', '1.2em')
      .style('fill', 'white')
      .attr('text-anchor', 'end')
    let initx = text.attr('x')
    let initText = text.text()
    let textTran = text.transition()
      .duration(2000)
      .tween('text', function () {
        return function (t) {
          D3.select(this).attr('x', Number(initx) + t * 300).text(Math.floor(Number(initText) + t * 300))
        }
      })
    console.log(textTran)
  }
}