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

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

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

安装

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

也可以使用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

开始画图

定义折线图的展示参数

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

8const width = 1000;

const height = 400;

const padding = {

top: 50,

right: 50,

bottom: 50,

left: 50,

};

在DOM中创建元素

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

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

4const svg = select('#container')

.append('svg')

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

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

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

定义数据结构

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

4interface ChartDataInterface {

date: string;

uv: number;

}

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

设置比例尺

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

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

1import {scaleLinear, scaleBand} from 'd3-scale';

有了比例尺，我们需要设置比例尺的domain和range：

domain 设置比例尺的域是一个值数组。将第一个元素映射到第一个频段，第二个元素映射到第二个频段，依次类推。

range 设置比例尺的值范围。为指定的两个数字数组，默认范围是[0, 1]

为了构造y轴的值范围，我们需要从y轴的数据中获取最大的值：

2import {max} from 'd3-array';

const maxData = max(this.chartData, (d: ChartDataInterface) => d.uv);

6const xScale = scaleBand()

.domain(this.chartData.map(item => item.date))

.range([0, width - padding.left - padding.right]);

const yScale = scaleLinear()

.domain([0, maxData])

.range([height - padding.top - padding.bottom, 0]);

x轴的比例尺范围为从左到右，y轴的比例尺范围为从上到下，注意需要减去边距。

设置坐标轴

坐标轴我们需要使用axisBottom和axisLeft，即左轴和下轴，需要引入这两个符号：

1import {axisBottom, axisLeft} from 'd3-axis';

然后直接用我们前面构造的比例尺来生成坐标轴：

2const xAxis = axisBottom(xScale);

const yAxis = axisLeft(yScale);

接下来绘制坐标轴。

8svg.append('g')

.attr('class', 'axis')

.attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')

.call(xAxis);

svg.append('g')

.attr('class', 'axis')

.attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')

.call(yAxis);

这样在页面中可以看到我们的坐标轴了：

绘制折线

首先我们需要一个折线的路径，需要line函数，需要引入：

1import {line} from 'd3-shape';

用line生成一个折线生成器，然后line.x设置x坐标访问器，line.y设置y坐标访问器。

3const linePath = line()

.x((d: ChartDataInterface) => xScale(d.date))

.y((d: ChartDataInterface) => yScale(d.uv));

这里需要注意，line默认的的参数为[number, number][]，我们这里需要提供一个类型给line，让它接受我们的数据结构，不然会ts报错很烦。

然后开始绘制折线：

8svg.append('path')

.datum(this.chartData)

.attr('class', 'line-path')

.attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')

.attr('d', linePath)

.attr('fill', 'none')

.attr('stroke-width', 3)

.attr('stroke', 'green');

看看绘制出来的线：

嗯。。。。好像对，好像又不对，折线图的是绘制了出来了，但是为什么好像偏了？？？

自信点，不是好像，是确定偏了。

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

d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
d3js绘制y坐标轴_如何用D3绘制各类样式的x坐标轴
该文只使用d3.jsV4版本进行绘制,不关注V3版本,咱们要与时俱进.app 在绘制图表的过程当中,直坐标系是绕不开的一个问题,直方图,折线图,散点图等等都须要使用到直坐标系.而其中最关键的是x轴的绘 ...
d3js绘制y坐标轴_用d3js创建一个简单的矩形图
用d3js创建一个简单的矩形前言本文并不是针对初学者的教程, 而是对矩形图绘制的基本流程做一个总结, 整理一下d3的基本工作流程. 正文用d3创建矩形图一般分为下面几个步骤 flow.png b ...
d3.js 刷新折线图（包括坐标轴及路径的刷新及信息点提示）
接上篇的的刷新折线图的样例,增加了信息点的显示以及坐标轴的更新.坐标轴的时间更新的应用可用于做历史曲线等曲线图.在这里碰到的问题是在mircrosoft Edge下运行完美.但是在chrome下出现 ...
D3.js之折线图动画
主要实现的效果一个折线图,然后线条可以从头到尾的出现. 折线图的代码基本上是别人的(本人也是正在学习的),自己只是在这上面基础上添加动画和一些文字和circle 参考:参考折线图的博客参考SVG动画 ...
d3js绘制y坐标轴_【ggplot2】设置坐标轴
基本箱线图 library(ggplot2) bp ggplot(PlantGrowth, aes(x=group, y=weight)) + geom_boxplot() bp 反转 x轴与 y轴 ...
d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件去网上下载要绘制地图的geoJson文件. 使用d3.json( ...
D3.js 绘制柱状图
使用D3 V4版本绘制使用D3绘制柱状图,绘制效果如下: 使用D3绘制柱状图,先对需要绘制的图形拆解,主要分为以下几个部分: 1. 比例尺的定义 2. 坐标轴的绘制 3. 添加矩形 4. 修改坐标轴 ...
D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...

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

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

最新文章

热门文章