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

  • 相关阅读:
    14.会场安排问题(L4)
    图形化调试工具DDD
    sking
    全排列
    DNS
    一种排序
    多边形重心问题
    街区最短路径问题
    Fibonacci数
    python url解析
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7425026.html
Copyright © 2011-2022 走看看