D3 transtion

https://github.com/d3/d3/blob/master/API.md#transitions-d3-transition

没有调用transition(),append()返回的是选择集对象selection
调用transition()后,返回的是一个过度对象transition,没有data()``dataum()方法,是不可以绑定数据的
使用delay``duration``ease来设置延迟,过渡时间,过渡样式

    <script>
        svg = d3.select('body')
            .append('svg')
            .attr("width",300)
            .attr('height',300)
        var dataset = {startAngle:0,endAngle:Math.PI*0.5}
        var arcPath = d3.svg.arc()
                        .innerRadius(50)
                        .outerRadius(100)

        svg.append('rect')
            .attr('fill','blue')
            .attr('x',10)
            .attr('y',10)
            .attr('width',100)
            .attr('height',30)
            .transition()
            .attr('width',300)
            .delay(500)
            .duration(1000)
            .ease('bounce')
    </script>

可以多次过渡

    <script>
        svg = d3.select('body')
            .append('svg')
            .attr("width",300)
            .attr('height',300)
        var dataset = {startAngle:0,endAngle:Math.PI*0.5}
        var arcPath = d3.svg.arc()
                        .innerRadius(50)
                        .outerRadius(100)

        svg.append('rect')
            .attr('fill','blue')
            .attr('x',10)
            .attr('y',10)
            .attr('width',100)
            .attr('height',30)
            .transition()
            .attr('width',300)
            .delay(500)
            .duration(1000)
            .transition()
            .attr('height',100)
            .duration(1000)
    </script>

控制过渡属性

transition.attrTween - tween the given attribute using a custom interpolator.
attrTween()第一个参数是属性名,第二个参数是无名函数function(d,i,a)
function(d,i,a) d是绑定的数据 i是索引号 a是width的初始值,返回的function(t)是插值函数
function(t) t是[0,1],0表示变化起始,1,表示结束
这里a=100,当t=0时,function(t)返回100,当t=1时,返回为110

    <script>
        svg = d3.select('body')
            .append('svg')
            .attr("width",300)
            .attr('height',300)
        var dataset = {startAngle:0,endAngle:Math.PI*0.5}
        var arcPath = d3.svg.arc()
                        .innerRadius(50)
                        .outerRadius(100)

        svg.append('rect')
            .attr('fill','blue')
            .attr('x',10)
            .attr('y',10)
            .attr('width',100)
            .attr('height',30)
            .transition()
            .attrTween('width',(d,i,a)=>{return (t)=>Number(a)+t*10})
            .duration(1000)
    </script>

文字过渡

transition.text - set the text content when the transition starts.
transition.textTween - tween the text using a custom interpolator.

删除

淡出的时候用

对选择集的子集作用

transition.select - schedule a transition on the selected elements.
transition.selectAll - schedule a transition on the selected elements.

each&call

selection.transition - schedule a transition for the selected elements.
selection.interrupt - interrupt and cancel transitions on the selected elements.
d3.transition - schedule a transition on the root document element.
transition.select - schedule a transition on the selected elements.
transition.selectAll - schedule a transition on the selected elements.
transition.filter - filter elements based on data.
transition.merge - merge this transition with another.
transition.selection - returns a selection for this transition.
transition.transition - schedule a new transition following this one.
transition.call - call a function with this transition.
transition.nodes - returns an array of all selected elements.
transition.node - returns the first (non-null) element.
transition.size - returns the count of elements.
transition.empty - returns true if this transition is empty.
transition.each - call a function for each element.
transition.on - add or remove transition event listeners.
transition.end - await the end of a transition.
transition.attr - tween the given attribute using the default interpolator.
transition.attrTween - tween the given attribute using a custom interpolator.
transition.style - tween the given style property using the default interpolator.
transition.styleTween - tween the given style property using a custom interpolator.
transition.text - set the text content when the transition starts.
transition.textTween - tween the text using a custom interpolator.
transition.remove - remove the selected elements when the transition ends.
transition.tween - run custom code during the transition.
transition.delay - specify per-element delay in milliseconds.
transition.duration - specify per-element duration in milliseconds.
transition.ease - specify the easing function.
d3.active - select the active transition for a given node.
d3.interrupt - interrupt the active transition for a given node.