d3.js 动画选择子元素

import * as D3 from 'd3'

export default class DThree {
  createSvgG (result) {
    let svg = D3.select(result)
      .append('svg')
      .attr('width', 400)
      .attr('height', 400)
    let g = svg.append('g')
    g.append('rect')
    g.append('rect')
    let selectG = D3.select('g')
    selectG.transition()
      .attr('x', 50)
  }
  createSvgGTwo (result) {
    let dataset = [100, 100, 100]
    let g = D3.select(result).append('svg')
      .attr('width', 400)
      .attr('height', 400)
      .append('g')
    let rect = g.selectAll('rect')
      .data(dataset)
      .enter()
      .append('rect')
      .attr('fill', 'steelblue')
      .attr('id', function (d, i) {
        return 'rect' + i
      })
      .attr('width', function (d, i) {
        return d
      })
      .attr('height', 30)
      .attr('x', 10)
      .attr('y', function (d, i) {
        return 10 + i * 35
      })
    console.log(rect)
    // g.transition()
    //   .duration(2000)
    //   .select('#rect1')
    //   .attr('width', 300)
    // g.selectAll('rect')
    //   .transition()
    //   .attr('width', 300)
    g.transition()
      .selectAll('rect')
      .filter(function (d, i) {
        return i >= 1
      })
      .attr('width', 300)
  }
}