数据可视化【六】Line Chart && Area Chart

最新推荐文章于 2024-05-09 10:50:01 发布
最新推荐文章于 2024-05-09 10:50:01 发布
阅读量741 收藏
点赞数
分类专栏： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T_T233333333/article/details/108087838
版权

Line Chart

vizhub代码：

https://vizhub.com/Edward-Elric233/094396fc7a164c828a4a8c2e13045308

实现效果：
在这里插入图片描述
这里先使用d3.line()设置每个点的x坐标和y坐标，然后再用这个东西设置path的'd'属性，就可以得到曲线。

const lineGenerator = d3.line()
   .x(d => xScale(xValue(d)))
   .y(d => yScale(yValue(d)))
   .curve(d3.curveBasis); //使得曲线比较光滑

g.append('path')
   .attr('class', 'line-path')
   .attr('d', lineGenerator(data));

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Temperature in San Francisc Line Chart</title>
    <link rel="stylesheet" href="./styles.css">
    <script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
    <!-- find D3 file on UNPKG d3.min.js-->
</head>

<body>
    <svg width="960" height="500"></svg>
    <script src="./index.js">
        // console.log(d3); test whether you have imported d3.js or not
    </script>

</body>

</html>

html.js

const svg = d3.select('svg');
// svg.style('background-color', 'red'); test
const width = +svg.attr('width');
const height = +svg.attr('height');

const render = data => {
    const title = 'A week in San Francisco';
    const xValue = d => d.timestamp;
    const xAxisLabel = 'Time';
    const yValue = d => d.temperature;
    const yAxisLabel = 'Temperature';
    const margin = { top: 60, right: 20, bottom: 80, left: 100 };
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    const circleRadius = 6;

    const xScale = d3.scaleTime()
        //.domain([min(data, xValue), max(data, xValue)])	//和下面的写法等价
        .domain(d3.extent(data, xValue))
        .range([0, innerWidth])
        .nice(); //作用是如果值域的最大值不够整齐可以变得整齐


    // const yScale = scaleBand()
    const yScale = d3.scaleLinear()
        .domain([d3.max(data, yValue), d3.min(data, yValue)])
        .range([0, innerHeight])
        .nice();

    //const xAxisTickFormat = number => format('.3s')(number).replace('G','B');

    const yAxis = d3.axisLeft(yScale)
        .tickSize(-innerWidth)
        .tickPadding(15);
    const xAxis = d3.axisBottom(xScale)
        //.tickFormat(xAxisTickFormat)
        .tickSize(-innerHeight) //设置tick-line的长度
        .tickPadding(15); //通过设置Padding让x轴的数字离远一点



    const g = svg.append('g')
        .attr('transform', `translate(${margin.left},${margin.top})`);

    //yAxis(g.append('g'));
    const yAxisG = g.append('g').call(yAxis);
    yAxisG.selectAll('.domain').remove();

    yAxisG.append('text')
        .attr('class', 'axis-label')
        .attr('y', -70)
        .attr('x', -innerHeight / 2)
        .attr('fill', 'black')
        .attr('transform', `rotate(-90)`)
        .attr('text-anchor', 'middle') //设置锚点在中心
        .text(yAxisLabel);

    const xAxisG = g.append('g').call(xAxis)
        .attr('transform', `translate(0,${innerHeight})`);
    xAxisG.selectAll('.domain').remove();

    xAxisG.append('text')
        .attr('class', 'axis-label')
        .attr('y', 60)
        .attr('x', innerWidth / 2)
        .attr('fill', 'black')
        .text(xAxisLabel);

    let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];

    const createGetColor = (idx) => {
        var i = idx || -1;
        return {
            get: () => { i = (i + 1) % colorSet.length; return colorSet[i]; }
        };
    };

    const getColor = createGetColor();

    const lineGenerator = d3.line()
        .x(d => xScale(xValue(d)))
        .y(d => yScale(yValue(d)))
        .curve(d3.curveBasis); //使得曲线比较光滑

    g.append('path')
        .attr('class', 'line-path')
        .attr('d', lineGenerator(data));
    /*
    g.selectAll('circle').data(data)
        .enter().append('circle')
            .attr('cy', d=>yScale(yValue(d)))
            .attr('cx', d => xScale(xValue(d)))
            .attr('r', circleRadius)
            .attr('fill', 'red');
    */
    g.append('text')
        .attr('class', 'title')
        .attr('y', -20)
        .attr('x', innerWidth / 2)
        .attr('text-anchor', 'middle')
        .text(title);
};

d3.csv('https://vizhub.com/curran/datasets/temperature-in-san-francisco.csv').then(data => {
    // console.log(data);
    data.forEach(d => {
        //得到的数据默认每个属性的值都是字符串，因此需要进行转换
        d.temperature = +d.temperature;
        d.timestamp = new Date(d.timestamp);
    });
    render(data);
});

styles.css

body {
    margin: 0px;
    overflow: hidden;
    font-family: manosapce;
}

circle {
    opacity: 0.5;
}

text {
    font-family: sans-serif;
}

.tick text {
    font-size: 2em;
    fill: #8E8883
}

.tick line {
    stroke: #E5E2E0
}

.axis-label {
    fill: #8E8883;
    font-size: 2.5em
}

.title {
    font-size: 3em;
    fill: #8E8883
}

.line-path {
    fill: none;
    stroke: steelblue;
    stroke-width: 5;
    stroke-linejoin: round /*使得曲线比较光滑*/
}

其实也可以在折现图上加上点，只需要去掉原本散点图的注释就可以了。但是我觉得这样不好看就没有加上。

Area Chart

vizhub代码：

https://vizhub.com/Edward-Elric233/9fa9b8c649cf41a3afcde6e185a72cca

https://vizhub.com/Edward-Elric233/39790021eded4d398be6f97726e73dd2

area图只需要把使用line的地方换成area即可。不同的地方在于area需要设置y0,y1,y用来划分区域，而且需要设置path的fill属性，用来表示区域的颜色。一般来讲应该不需要设置线的stroke和stroke-width属性。

例如把上面的图变成Area Chart
在这里插入图片描述
需要修改的js代码如下：

const areaGenerator = area()
  	.x(d => xScale(xValue(d)))
  	.y1(d=>yScale(yValue(d)))
  	.y0(innerHeight)
  	.curve(curveBasis);	//使得曲线比较光滑
  
  g.append('path')
  	.attr('class', 'line-path')
  	.attr('d', areaGenerator(data));

这里还画了一个图，把网格提到了图形的前面。
在这里插入图片描述
虽然有些丑，但是如果需要使用的话还是可以的。技巧就是先生成Area图，然后再生成坐标轴就可以了。这样坐标线就会显示在图形的上面。

index.html

<!DOCTYPE html>
<html>

<head>
    <title>World Population Area Chart</title>
    <link rel="stylesheet" href="./styles.css">
    <script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
    <!-- find D3 file on UNPKG d3.min.js-->
</head>

<body>
    <svg width="960" height="500"></svg>
    <script src="./index.js">
        // console.log(d3); test whether you have imported d3.js or not
    </script>

</body>

</html>

index.js

const svg = d3.select('svg');
// svg.style('background-color', 'red'); test
const width = +svg.attr('width');
const height = +svg.attr('height');

const render = data => {
    const title = 'World Population';
    const xValue = d => d.year;
    const xAxisLabel = 'Year';
    const yValue = d => d.population;
    const yAxisLabel = 'Population';
    const margin = { top: 60, right: 20, bottom: 80, left: 100 };
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    const circleRadius = 6;

    const xScale = d3.scaleTime()
        //.domain([min(data, xValue), max(data, xValue)])	//和下面的写法等价
        .domain(d3.extent(data, xValue))
        .range([0, innerWidth])
        //.nice();	//作用是如果值域的最大值不够整齐可以变得整齐


    // const yScale = scaleBand()
    const yScale = d3.scaleLinear()
        .domain([d3.max(data, yValue), 0])
        .range([0, innerHeight])
        .nice();

    const yAxisTickFormat = number => d3.format('.1s')(number).replace('G', 'B');

    const yAxis = d3.axisLeft(yScale)
        .tickFormat(yAxisTickFormat)
        .tickSize(-innerWidth)
        .tickPadding(15);
    const xAxis = d3.axisBottom(xScale)
        //.tickFormat(xAxisTickFormat)
        .ticks(10) //设置标签的多少，不知道为什么如果设置为10就会很乱，可能是因为这是一周的时间，如果划分成10个以上就需要显示小时吧
        .tickSize(-innerHeight) //设置tick-line的长度
        .tickPadding(15); //通过设置Padding让x轴的数字离远一点



    const g = svg.append('g')
        .attr('transform', `translate(${margin.left},${margin.top})`);

    const areaGenerator = d3.area()
        .x(d => xScale(xValue(d)))
        .y1(d => yScale(yValue(d)))
        .y0(innerHeight)
        .curve(d3.curveBasis); //使得曲线比较光滑

    g.append('path')
        .attr('class', 'line-path')
        .attr('d', areaGenerator(data));

    //yAxis(g.append('g'));
    const yAxisG = g.append('g').call(yAxis);
    yAxisG.selectAll('.domain').remove();

    yAxisG.append('text')
        .attr('class', 'axis-label')
        .attr('y', -70)
        .attr('x', -innerHeight / 2)
        .attr('fill', 'black')
        .attr('transform', `rotate(-90)`)
        .attr('text-anchor', 'middle') //设置锚点在中心
        .text(yAxisLabel);

    const xAxisG = g.append('g').call(xAxis)
        .attr('transform', `translate(0,${innerHeight})`);
    xAxisG.selectAll('.domain').remove();

    xAxisG.append('text')
        .attr('class', 'axis-label')
        .attr('y', 60)
        .attr('x', innerWidth / 2)
        .attr('fill', 'black')
        .text(xAxisLabel);

    let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];

    const createGetColor = (idx) => {
        var i = idx || -1;
        return {
            get: () => { i = (i + 1) % colorSet.length; return colorSet[i]; }
        };
    };

    const getColor = createGetColor();


    /*
    g.selectAll('circle').data(data)
        .enter().append('circle')
            .attr('cy', d=>yScale(yValue(d)))
            .attr('cx', d => xScale(xValue(d)))
            .attr('r', circleRadius)
            .attr('fill', 'red');
    */
    g.append('text')
        .attr('class', 'title')
        .attr('y', -20)
        .attr('x', innerWidth / 2)
        .attr('text-anchor', 'middle')
        .text(title);
};

d3.csv('https://vizhub.com/curran/datasets/world-population-by-year-2015.csv').then(data => {
    console.log(data);
    data.forEach(d => {
        //得到的数据默认每个属性的值都是字符串，因此需要进行转换
        d.population = +d.population;
        d.year = new Date(d.year);
    });
    render(data);
});

styles.css

body {
    margin: 0px;
    overflow: hidden;
    font-family: manosapce;
}

circle {
    opacity: 0.5;
}

text {
    font-family: sans-serif;
}

.tick text {
    font-size: 2em;
    fill: #8E8883
}

.tick line {
    stroke: #E5E2E0
}

.axis-label {
    fill: #8E8883;
    font-size: 2.5em
}

.title {
    font-size: 3em;
    fill: #8E8883
}

.line-path {
    fill: #42A5B3;
    /*   stroke : blue;
    stroke-width : 5; */
}
王江奎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
amchart -2 Line & Area(flash chart 图表)
01-02
**标签解析："amchart -2 Line & Area(flash chart 图表)"** 标签再次强调了这个工具的核心特性，即它与amchart库的第二版本相关，专注于绘制线形和面积类型的图表，这些都是数据可视化的常用方法。 **压缩包子文件...
C#winform端SunnyUI之uiLineChart
风，停了
10-11 6724
C#winform端SunnyUI之uiLineChart
c# 曲线 SunnuUi LineChart 的使用
最新发布
m0_67560682的博客
05-09 913
c# 曲线 SunnuUi LineChart 的使用
Unity自定义UI组件(十) 折线图
SpringD
07-17 8925
前言 在工程三维可视化领域，用图表展示数据较为常用，近期看有人在论坛里所求折线图插件，于是我就把折线图(LineChartGraph)也加入了SpringGUI中,这里我简单介绍一下，便于有需要的人使用。 组件特点 无需Asset资源 无需制作Prefab 支持动态流式数据 工厂模式搭建，便于新的样式的接入 主要讲解工厂模式和中介者模式在实际开发中的使用.
"折线图"组件:<chart-line> —— 快应用组件库H-UI
H-UI官方博客
04-17 817
触摸反馈： <import name="chart-line" src="../Common/ui/h-ui/chart/c_chart_line"></import> <template> <div class="container-full"> <chart-line id="canvas1" data="{{d...
想到啥写啥第一期：简单又粗糙的制图表LineChart
weixin_43272727的博客
01-18 216
想到啥写啥第一期：致力于更简单易懂的代码解决我们安卓小白遇到的问题 来一个要导包的东西吧，制图表，LineChart BarChart PieChart 包应该是2.几版本，更高版本还没学，学了以后我会发出来的 毕竟更高版本写的图表更好看点，方法也更多 Action！ 三个步骤：UI的LineChart，Java的LIneChart设计，Java的LineData赋值 （方法有点多，随便挑点讲，不...
react-charty:数据可视化组件
05-03
React慈善 该组件是从编程竞赛中诞生的，我获得了其中的一等奖。 非常感谢Telegram团队和所有参赛者。 进一步阅读以找到用法说明以及如何自定义此组件。 请查看和示例图表和用法！ 目录 用作独立库 ...
reaviz：:bar_chart:基于D3的React数据可视化库
02-05
基于D3js的React数据可视化库 REAVIZ是一个模块化的图表组件库，在使用D3js进行计算的同时，本机利用React来呈现组件。 该库提供了一种轻松创建图表的简便方法，而无需牺牲自定义功能。 :rocket: 快速链接 查看 在...
Chart控件显示一组或多组数据画直方图和折线图
01-28
在.NET框架中，Chart控件是一个强大的工具，用于可视化各种数据类型，包括直方图和折线图。本文将深入探讨如何使用C#语言和Chart控件来展示一组或多组数据，并实现3D模式。 首先，`Chart`控件是Windows Forms应用...
muze：Web可组合的数据可视化库，采用WebAssembly的数据优先方法
02-04
muze是一个强大的数据可视化库，专为Web应用设计，强调数据处理和呈现的高效性。这个库的独特之处在于它采用了WebAssembly技术，这是一种新兴的Web技术，允许JavaScript在浏览器中执行接近原生速度的代码。通过利用...
高性能图表库LightningChart JS v5.0 - 轻松实现图表自定义布局
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-13 267
专注于实时数据可视化的高性能图表库LightningChart JS v5.0正式发布，本文将带大家一起来看看都有哪些新的功能！
Unity3D开发之折线图的制作（二）
Jay W的博客
05-10 5641
一年前写过一篇折线图的制作，当时显示效果还可以，只不过因为之前刚接触写博客，所以写的内容不是很完善，加上比较忙，都是草率记录的，代码结构也不是很好。昨天我又把这个项目的代码熟悉了一遍，然后把代码更改精炼了下。应该比以前更容易读懂了。 代码如下，上面都有注释： using System.Collections.Generic; using UnityEngine; using ...
绘制LineChart线形图
raphero
06-04 2094
<![CDATA[ import model.Person; import mx.collections.ArrayCollection; [Bindable] public var personHeightColl:ArrayCollection = new ArrayCollection(); public function initApp
areachart
分享嵌入式,移动端,智能应用,数据库等专业板块,记录知识碎片！！！
11-10 366
pro文件配置 QT += charts 代码 /**************************************************************************** ** ** Copyright (C) 2016 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Charts module of the Qt Toolki.
chartarea缩放_Google图表（AreaChart）如何检测缩放变化
weixin_39564527的博客
12-18 70
I am drawing an AreaChart, with some markers on an overlay.I am using the explorer option (horizontal only) in order to let the user zoom in and out.The problem is that I can't find a way to be notifi...
UGUI 绘制自定义折线图
叫我上上的博客
08-02 1410
使用 挂载LineChart.cs 点击autoCreate按钮，会创建子节点，可以在子节点上挂载自定义控件 实现LineChart.csusing System.Collections; using System.Collections.Generic; using UnityEngine;namespace ViVi.UIExtensions { [ExecuteInEditMode]
d3 画曲线
romeo12334的博客
10-23 3295
准备工作创建画布、创建组之类的省略。 准备数据，并用比例尺扩大到整个画布（画布大小自己设置） let data = [1,3,4,5,5] let scale_x = d3.scaleLinear() .domain([0, data.length - 1]) .range([0, this.svgWidth]) let scale_y = d3.scaleLinear() .domain(...
可视化绘图技巧100篇进阶篇（八）-区域面积图（Area Chart）
getusushu的博客
08-16 200
（Area Chart）是一种常见的数据可视化图表，用于展示不同类别的数据随时间或其他变量的变化趋势，并强调每个类别在总体中所占的比例。区域面积图是由多个区域堆叠而成的图表，每个区域代表一个数据类别，沿着横轴表示时间或其他变量的维度。每个类别的数据值在纵轴上表示，区域的面积大小表示该类别数据在整体中的占比。
Flex4 动态生成，LineChart，AreaChart，ColumnChart，PieChart，DataGrid等
weixin_34273479的博客
03-21 128
/** * ==========初始化LineChart=========== * @param app 是主程序入口：dynamicStackedChart * @param id 设置id：String * @param tipStr 用户自定义的笔触提示信息：String * @param xml 数据集：String ...
离散时间数据可视化可选图表有哪些？
06-06
离散时间数据可视化可选的图表有以下几种： 1. 条形图（Bar chart）：通过条形的高度或长度来表示数据的大小，可以清晰地展示离散时间数据的变化趋势。 2. 折线图（Line chart）：通过连续的线条来表示数据的变化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值