码迷,mamicode.com
首页 > 其他好文 > 详细

[D3] Animate with the General Update Pattern in D3 v4

时间:2017-08-24 21:32:58      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:hang   tran   sub   func   value   demo   ati   before   creat   

In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selections. When a chart‘s data changes over time and each update can both create new elements and destroy existing ones, the General Update pattern can help convey meaning to users. This lesson demonstrates the pattern using animated transitions on a column chart.

 

function render(subject = math) {

    // Define a resuable transation variable
    var t = d3.transition().duration(1000);

    var update = svg.selectAll(rect)
        .data(data.filter(d => d[subject]), d => d.name); //d => d.name is a uniq idientifier

    // First: we want to remove the existing object which doesn‘t have any value
        // Get rid of null value object
        // Also animation y and height attr to produce
        // fade out effect 
    update
        .exit()
        .transition(t)
        .attr(y, height)
        .attr(height, 0)
        .remove();

    // Second, we want to animate the existing elements height    
    update
        .transition(t)
        .delay(1000)
        .attr(y, d => yScale(d[subject]))
        .attr(height, d => height - yScale(d[subject]));

    // Last, for the new data which is not in the page before
        // We want to animate    
    update
        .enter()
        .append(rect)
        .attr(y, height)
        .attr(height, 0)
        .attr(x, d => xScale(d.name))
        .attr(width, d => xScale.bandwidth())
        .transition(t)
        .delay(update.exit().size() ? 2000: 0) // If page refresh, we don‘t want to wait 2000ms
        .attr(y, d => yScale(d[subject]))
        .attr(height, d => height - yScale(d[subject]));
}

render();

 

 

[D3] Animate with the General Update Pattern in D3 v4

标签:hang   tran   sub   func   value   demo   ati   before   creat   

原文地址:http://www.cnblogs.com/Answer1215/p/7425026.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!