1. transition

//    可以給父元素開(kāi)啟過(guò)渡效果然后用select找到子元素修改屬性時(shí)就會(huì)產(chǎn)生過(guò)渡效果
    g.transition().duration(2000).ease("bounce-out").select(".rect-1").attr("width",500);
//    也可以直接給修改屬性的元素開(kāi)啟過(guò)渡效果
    d3.select(".rect-1").transition().duration(2000).ease("bounce-out").attr("width",500);
//    開(kāi)啟過(guò)渡后所有子元素都會(huì)享有過(guò)渡動(dòng)畫(huà)
    g.transition().duration(2000).ease("bounce-out").selectAll("[class^=rect]").attr("width",500);

2. each()

//    開(kāi)啟過(guò)渡效果后會(huì)返回一個(gè)過(guò)渡對(duì)象該對(duì)象有一個(gè)增強(qiáng)版的each可以給第一個(gè)參數(shù)放一個(gè)事件名稱
//    start(開(kāi)始)  stop(結(jié)束) interrupt(打斷 -- 在過(guò)渡效果執(zhí)行中 又在其他地方調(diào)用了過(guò)渡會(huì)觸發(fā)打斷事件)
//    如果只傳一個(gè)參數(shù)則與普通的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);
    //    比例尺的定義域發(fā)生了變化
    xScale.rangeRoundBands([width, 0]);
    //    call執(zhí)行映射比例尺的行為**也是修改子元素的屬性**
    // 可以給父元素開(kāi)啟過(guò)渡后調(diào)用call可以產(chǎn)生過(guò)渡效果
    g.transition().duration(2000).ease("bounce-out").call(xAxis);