js 如何作画简单坐标轴_React + D3.js 之图表制作—

本文链接：https://blog.csdn.net/weixin_42327743/article/details/112078750

本文介绍了如何使用React和D3.js来制作折线与面积图，详细讲解了从坐标轴到折线、面积的绘制步骤，包括定义画布、画X轴和Y轴、生成折线和面积。同时，提到了动态图表的实现方法，通过d3.transition和d3.interpolate创建加载动画。

摘要由CSDN通过智能技术生成

上一篇我们分享了如何用React+D3.js来制作一个柱形图，今天跟大家分享如何制作折线与面积图。

因为折线图与面积图的制作基本相同，所以合在在一起作为一个图表来分享。

制作的流程我们还是跟制作柱形图一样，把它想象成是自己在用画笔画图，拆分成一个一个的零件来绘制。

那么对于一个折线与面积图来说他可以拆分成哪些部分呢？

坐标轴（x轴、y轴）
折线
面积

明确了需要绘制哪些内容之后，我们开始具体的绘制流程。

第一步：准备工作

数据以及图表的尺寸准备工作，我们都采用跟柱形图一样的。

数据：

[
    {
    
        "x": "x1",
        "y": 320
    },
    {
    
        "x": "x2",
        "y": 200
    },
    {
    
        "x": "x3",
        "y": 25
    },
    {
    
        "x": "x4",
        "y": 190
    },
    {
    
        "x": "x5",
        "y": 90
    }
]

图表变量：

// 图表宽高
const WIDTH = 450;
const HEIGHT = 400;

// 图表内容（柱子区域）的间距
const margin = {
    
    top: 20,
    right: 0,
    bottom: 30,
    left: 40
}

图表内容宽高:

const chartWidth = WIDTH - margin.left - margin.right;
const chartHeight = HEIGHT - margin.top - margin.bottom;

第二步：定义画布

跟柱形图一样，画一个SVG画布，宽高分别为之前定义的450，500.

<svg width={WIDTH} height={HEIGHT}>
</svg>

js 如何作画简单坐标轴_React + D3.js 之图表制作——折线与面积图

第一步：准备工作

第二步：定义画布

第三