zoukankan      html  css  js  c++  java
  • [D3] Animate Chart Axis Transitions in D3 v4

    When the data being rendered by a chart changes, sometimes it necessitates a change to the scales and axes of the chart as well. This lesson demonstrates how to animate and synchronize axis transitions on a column chart.

    var svg = d3.select('.chart')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .call(responsivefy)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
    /**
     * Y axis
     */
    const yScale = d3.scaleLinear()
        .domain([
            0, 100
        ])
        .range([height, 0]);
    const yAxis = svg
        .append('g')
        .call(d3.axisLeft(yScale));
    
    /**
     * x axis
     */
    const xScale = d3.scaleBand()
        .domain(data.map(d => d.name))
        .range([0, width])
        .padding(0.2);
    const xAxis = d3.axisBottom(xScale).tickSize(10).tickPadding(5);
    svg.append('g')
        .attr('transform', `translate(0, ${height})`)
        .call(xAxis)
        .selectAll('text')
        .attr('text-anchor', 'end')
        .attr('transform', 'rotate(-45)');
    
    // enter: which in the data, but not yet on the page
    // upate: which in the data, and also in the page
    // exit: which not in the data, but exist on the page
    // end
    
    
    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();
    
        // Update the y axis with animation
        yScale.domain(
            [0, d3.max(data, d => d[subject])]
        );
        yAxis
            .transition(t)
            .delay(1000)
            .call(d3.axisLeft(yScale));
    
        // 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();

  • 相关阅读:
    D. Babaei and Birthday Cake--- Codeforces Round #343 (Div. 2)
    Vijos P1389婚礼上的小杉
    AIM Tech Round (Div. 2) C. Graph and String
    HDU 5627Clarke and MST
    bzoj 3332 旧试题
    codeforces 842C Ilya And The Tree
    codesforces 671D Roads in Yusland
    Travelling
    codeforces 606C Sorting Railway Cars
    codeforces 651C Watchmen
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7444953.html
Copyright © 2011-2022 走看看