d3js绘制y坐标轴_使用D3.js 绘制折线图

在一个网站上绘制折线图使用了ant/g2，打包后的体积到了一兆多，这不行了，需要按需加载。但是它的支持不太友好，我尝试在官网上用它的方法来按需引入，不是缺这就是缺那，很不好用。

反正我这里只是画个折线图，其他的功能也用不上，那么我直接用D3自己手画不行么？

安装

可以查看官网选择直接使用

1

也可以使用npm安装，(点击查看npm地址)：

1npm install d3

可以直接导入一个D3的命名空间：

1import * as d3 from 'd3';

也可以导入一个模块：

1import {scaleLinear} from 'd3-scacle';

我使用在angular项目中，自带ts，那么我希望d3也有ts声明，可以安装：

1npm i --save @types/d3

开始画图

定义折线图的展示参数

我们需要定义折线图的高度、宽度，以及它的边距：

1

2

3

4

5

6

7

8const width = 1000;

const height = 400;

const padding = {

top: 50,

right: 50,

bottom: 50,

left: 50,

};

在DOM中创建元素

为了方便，我们可以先在html中创建一个用id标记的dom节点来放置我们的折线图，当然，也可以以动态的方式在ts中创建，因为我们的焦点在使用D3，所以先简单点，手动创建dom：

1

然后我们在ts中加入生成画布的命令：

1

2

3

4const svg = select('#container')

.append('svg')

.attr('width', width + 'px')

.attr('height', height + 'px');

目前我们在页面中是看不到啥的，如果审查页面，则可以看到svg元素已经创建了。

定义数据结构

我们这里的折线图的数据结构为：

1

2

3

4interface ChartDataInterface {

date: string;

uv: number;

}

date代表日期，uv是个数据值，代表这天的访问量。

设置比例尺

比例尺是把一组输入域映射到输出域的函数。映射就是两个数据集之间元素相互对应的关系。好比地图上的距离比例尺，假设地图上1cm代表500米，那么5cm代表2500米。一个意思。

D3中有各种比例尺函数，有连续性的，有非连续性的。我们这里目前情况，对于y轴，因为它是一个数值，所以我们需要一个线性比例