zoukankan      html  css  js  c++  java
  • [D3] Animate with the General Update Pattern in D3 v4

    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();

  • 相关阅读:
    jquery ui autocomplete
    解决IIS服务和用户上传的文件分别部署在不同的电脑上时,解决权限的问题
    wpf一些例子
    t-sql 笔记(2)
    t-sql 笔记(1)
    测试基础之软件测试模型
    测试用例设计方法之错误猜测法
    测试用例设计方法之边界值分析法
    批处理文件将多台连接的手机安装同一个APP
    安卓和IOS抓包工具
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7425026.html
Copyright © 2011-2022 走看看