zoukankan      html  css  js  c++  java
  • [D3] Build an Area Chart with D3 v4

    Similar to line charts, area charts are great for displaying temporal data. Whether you’re displaying a single set of data or multiple sets using an overlapping or stacked layout, D3 provides APIs to make the process straightforward. This lesson walks you through creating multiple layouts easily.

    var margin = {
        top: 10,
        right: 20,
        bottom: 65,
        left: 40
    };
    var width = 400 - margin.left - margin.right;
    var height = 600 - margin.top - margin.bottom;
    
    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 + ')');
    
    
    
    
    /**
     * Load data
     */
    d3.json('../data/data3.json', function (err, data) {
        const parseTime = d3.timeParse('%Y/%m/%d');
    
        data.forEach(company => {
            company.values.forEach(d => {
                d.date = parseTime(d.date)
                d.close = +d.close
            })
        })
    
        /**
         * Y axis
         */
        const yScale = d3.scaleLinear()
            .domain([
                d3.min(data, co => d3.min(co.values, d => d.close)),
                d3.max(data, co => d3.max(co.values, d => d.close))
            ])
            .range([height, 0])
            .nice();
        const yAxis = d3.axisLeft(yScale);
        svg.call(yAxis);
    
        /**
         * x axis
         */
        const xScale = d3.scaleTime()
            .domain([
                d3.min(data, co => d3.min(co.values, d => d.date)),
                d3.max(data, co => d3.max(co.values, d => d.date))
            ])
            .range([0, width])
            .nice();
        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)');
    
        console.log("yScale(yScale.domain()[0])", yScale(yScale.domain()[0])); //yScale(680)-->525
        /**
         * Creat area chart
         */    
        const area = d3.area()
            .x(d => xScale(d.date))
            .y0(yScale(yScale.domain()[0]))
            .y1(d => yScale(d.close))
            .curve(d3.curveCatmullRom.alpha(0.5));
    
        svg.selectAll('.area')
            .data(data)
            .enter()
            .append('path')
            .attr('class', 'area')
            .attr('d', d =>  area(d.values))    
            .style('stroke', (d, i) => ['#FF9900', '#3369E8'][i])
            .style('sroke-width', 2)
            .style('fill', (d, i) => ['#FF9900', '#3369E8'][i])
            .style('fill-opacity', 0.5);
    });
    
    
    
    
    
    
    
    function responsivefy(svg) {
        // get container + svg aspect ratio
        var container = d3.select(svg.node().parentNode),
            width = parseInt(svg.style("width")),
            height = parseInt(svg.style("height")),
            aspect = width / height;
    
        // add viewBox and preserveAspectRatio properties,
        // and call resize so that svg resizes on inital page load
        svg.attr("viewBox", "0 0 " + width + " " + height)
            .attr("preserveAspectRatio", "xMinYMid")
            .call(resize);
    
        // to register multiple listeners for same event type,
        // you need to add namespace, i.e., 'click.foo'
        // necessary if you call invoke this function for multiple svgs
        // api docs: https://github.com/mbostock/d3/wiki/Selections#on
        d3.select(window).on("resize." + container.attr("id"), resize);
    
        // get width of container and resize svg to fit it
        function resize() {
            var targetWidth = parseInt(container.style("width"));
            svg.attr("width", targetWidth);
            svg.attr("height", Math.round(targetWidth / aspect));
        }
    }

  • 相关阅读:
    硬件加速 Hardware Accelerated [MD]
    Redis 常见面试题(2020最新版)
    1秒时限情况下算法复杂度要求
    linux ikatago-server
    Linux踢出其他正在SSH登陆用户
    多个Git帐号的SSH key切换(不同网站的gitlab&github)
    RTL8201 替换适配国产JL11网卡
    网卡PHY 移植注意事项
    django shell执行命令来批量更新model 数据
    git 设置和取消socks5 代理
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7391507.html
Copyright © 2011-2022 走看看