【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");
});