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