【d3.js v4基礎】過渡transition

transition zh api

var t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");

transition.delay

設置或獲取延遲時間，value能夠爲常量也能夠爲函數，若是是函數則能夠爲過渡集中的每一個元素設置不一樣的延遲時間。默認延遲時間爲0.

爲不一樣的元素設置不一樣的延遲時間:

transition.delay(function(d, i) { return i * 10; });

transition.duration([value])

設置或獲取過渡時間，value能夠爲函數。

transition.ease([value])

設置或獲取easing function(過渡方式)，默認爲d3.easeCubic.

selection.interrupt([name])

中斷選擇集上活動的名爲name的過渡。若是name所表示的過渡尚未開始，則也不用開始了。若是沒有指定name,則使用null。

universal selector(通配符), *, 選中全部的後代元素，你也能夠經過以下方式中斷G元素以及其全部後代的過渡:

selection.interrupt().selectAll("*").interrupt();

d3.transition([name])

d3.selection()
  .transition(name)

transition.selection() <>

返回當前過渡集中所包含的selection。也就是從過渡集中將選擇集分離出來。

transition.select(selector)

transition
  .selection()
  .select(selector)
  .transition(transition)

transition.selectAll(selector)

同上，只不過是選擇全部符合條件的元素，而後在這些符合元素上都建立過渡，等價於:

transition
  .selection()
  .selectAll(selector)
  .transition(transition)

實例

<script>

var width = 960;
    var height = 500;
    var svg = d3.select("body").append("svg")
        .attr("width", '960')
        .attr("height", "500")

    var g = svg.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var c = g.append("circle")
        .attr('cx', 200)
        .attr("cy", 100)
        .attr('r', 50)
        .attr("fill", 'red');

        g.append("rect")
        .attr('x', 100)
        .attr("y", 100)
        .attr('width', 150)
        .attr('height',150)
        .attr("fill", 'red');


    var t = d3.transition()
        .duration(1750)
        .ease(d3.easeLinear);

    var gt = g.transition(t)
        .duration(750)
        .ease(d3.easeLinear)
        .attr('transform', "translate(200,200)");

        gt.selection()
        .selectAll('rect')
        .transition(t)
        .attr("fill", "blue");

        gt.selection()
        .selectAll('circle')
        .transition(t)
        .attr("fill", "blue");
       
</script>

transition.filter(filter）

gt.selection()
            .filter(function(d,i){
                console.log(d)
            })
            .transition(t)
            .attr("fill", "blue");

transition.transition()

在當前的過渡集上再建立一個新的過渡，能夠使用這個方法串聯多個過渡:

d3.selectAll(".apple")
  .transition() // First fade to green.
    .style("fill", "green")
  .transition() // Then red.
    .style("fill", "red")
  .transition() // Wait one second. Then brown, and remove.
    .delay(1000)
    .style("fill", "brown")
    .remove();

d3.active(node[, name])

返回指定節點上名爲name的活動的過渡。若是沒有指定name則使用null。這個方法能夠方便的建立鏈式過渡，好比建立一個循環disco過渡:

d3.selectAll("circle").transition()

.delay(function(d, i) { return i * 50; })
.on("start", function repeat() {
    d3.active(this)
        .style("fill", "red")
      .transition()
        .style("fill", "green")
      .transition()
        .style("fill", "blue")
      .transition()
        .on("start", repeat);
  });

transition.attr(name, value)

transition.attrTween(name[, factory])

若是factory非null，則根據插值factory從對name進行過渡。插值factory是一個返回interpolator的方法。在過渡開始時，對每一個元素調用factory，並傳遞當前的元素綁定的數據d,i，this指向當前的DOM元素。返回的插值器會在過渡中的每一幀進行調用並傳遞當前的參數t. t的範圍爲[0,1],而後返回插值器計算後的值給name使用，插值器必須返回字符串類型。
若是factory爲null，則移除name屬性。若是沒有指定factory則返回當前的插值器。

好比，對fill屬性進行插值:

selection.attrTween("fill", function() {
  return d3.interpolateRgb("red", "blue");
});

或者從當前的fill值插值到blue：

selection.attrTween("fill", function() {
  return d3.interpolateRgb(this.getAttribute("fill"), "blue");
});