过渡效果

1. transition

//    可以给父元素开启过渡效果然后用select找到子元素修改属性时就会产生过渡效果
    g.transition().duration(2000).ease("bounce-out").select(".rect-1").attr("width",500);
//    也可以直接给修改属性的元素开启过渡效果
    d3.select(".rect-1").transition().duration(2000).ease("bounce-out").attr("width",500);
//    开启过渡后所有子元素都会享有过渡动画
    g.transition().duration(2000).ease("bounce-out").selectAll("[class^=rect]").attr("width",500);

2. each()

//    开启过渡效果后会返回一个过渡对象该对象有一个增强版的each可以给第一个参数放一个事件名称
//    start(开始)  stop(结束) interrupt(打断 -- 在过渡效果执行中 又在其他地方调用了过渡会触发打断事件)
//    如果只传一个参数则与普通的d3.each一样使用
    g.transition().duration(2000).ease("bounce-out").each("interrupt", function () {
        console.log("interrupt");
    }).select(".rect-1").attr("width", 500);
    setTimeout(function () {
        g.transition().duration(2000).ease("bounce-out").selectAll("[class^=rect]").attr("width", 500);
    }, 1000);

3. call()

  const xScale = d3.scale.ordinal().domain(d3.range(dataSet.length)).rangeRoundBands([0, width], .5);
    const xAxis = d3.svg.axis().scale(xScale).orient("bottom");
    const g = svg.append("g").attr("class", "axis").attr("transform", "translate(20,300)").call(xAxis);
    //    比例尺的定义域发生了变化
    xScale.rangeRoundBands([width, 0]);
    //    call执行映射比例尺的行为**也是修改子元素的属性**
    // 可以给父元素开启过渡后调用call可以产生过渡效果
    g.transition().duration(2000).ease("bounce-out").call(xAxis);