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