D3 二维图表的绘制系列(一)介绍

1 介绍

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术,让你可以借助于现代浏览器的强大功能自由的对数据进行可视化

学习了d3一个多月,通过绘制一些简单的二维图表,总算入门了d3。强烈推荐《D3数据可视化实战手册》,讲的很清晰,我的部分图表demo也是模仿它写的。

每张图表在绘制之前,首先需要在页面上创建svg对象作为画布,并预留一定的margin,因此为了方便,减少代码的冗余,我定义了一个chart对象, 该对象具有一些内置的属性和方法,不仅帮助我们在绘图前快速地初始化画布,而且还能快速的设置图表的widthheightmargin等属性, 运用裁剪clip保证元素不超出画布等。

chart对象源码请狠狠点击这里

初始化后的画布结构如图, 之后的大部分图表主体部分的绘制范围都局限于body中
在这里插入图片描述

2 demo的代码结构

大部分每张图表都具有如下4个文件,其中data.csv用于存储源数据,index.css用于设置图表的css样式,index.html则是图表所在的页面,而index.js则是绘制图表的关键代码
在这里插入图片描述
index.html示例
在这里插入图片描述
index.css示例
在这里插入图片描述
data.csv示例
在这里插入图片描述

3 目录

D3 二维图表的绘制系列(二)基础柱状图

D3 二维图表的绘制系列(三)多列柱状图

D3 二维图表的绘制系列(四)堆叠柱状图

D3 二维图表的绘制系列(五)横向柱状图

D3 二维图表的绘制系列(六)基础折线图

D3 二维图表的绘制系列(七)堆叠面积图

D3 二维图表的绘制系列(八)曲线图

D3 二维图表的绘制系列(九)基础饼图

D3 二维图表的绘制系列(十)环状饼图

D3 二维图表的绘制系列(十一)南丁格尔图

D3 二维图表的绘制系列(十二)基础散点图

D3 二维图表的绘制系列(十三)多符号散点图

D3 二维图表的绘制系列(十四)气泡图

D3 二维图表的绘制系列(十五)雷达图

D3 二维图表的绘制系列(十六)矩形树状图

D3 二维图表的绘制系列(十七)树图

D3 二维图表的绘制系列(十八)漏斗图

D3 二维图表的绘制系列(十九)封闭图

D3 二维图表的绘制系列(二十)河流图

D3 二维图表的绘制系列(二十一)仪表盘图

D3 二维图表的绘制系列(二十二)桑基图sankey

D3 二维图表的绘制系列(二十三)旭日图

D3 二维图表的绘制系列(二十四)力导向图

D3 二维图表的绘制系列(二十五)中国地图

D3 二维图表的绘制系列(二十六)盒须图

D3 二维图表的绘制系列(二十七)日历热力图

D3 二维图表的绘制系列(二十八)关系图-弦图

D3 二维图表的绘制系列(二十九)径向树图

D3 二维图表的绘制系列(三十)平行坐标系折线图

D3 二维图表的绘制系列(三十一)热力地图(heatMap.js)

D3 二维图表的绘制系列(三十二)可缩放的封闭图

D3 二维图表的绘制系列(三十三)可缩放的矩形树图


如果觉得这篇文章帮助了您,请打赏一个小红包鼓励作者继续创作哦!!!

在这里插入图片描述

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值