D3 二维图表的绘制系列（一）介绍

悠悠 2021-11-09 13:08 658阅读 0赞

# 1 介绍 #

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

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

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

## **源码请狠狠点击[这里][Link 1](帮忙点个star啦)** ##

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

# 2 demo的代码结构 #

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

# 3 目录 #

[D3 二维图表的绘制系列（二）基础柱状图][D3]

[D3 二维图表的绘制系列（三）多列柱状图][D3 1]

[D3 二维图表的绘制系列（四）堆叠柱状图][D3 2]

[D3 二维图表的绘制系列（五）横向柱状图][D3 3]

[D3 二维图表的绘制系列（六）基础折线图][D3 4]

[D3 二维图表的绘制系列（七）堆叠面积图][D3 5]

[D3 二维图表的绘制系列（八）曲线图][D3 6]

[D3 二维图表的绘制系列（九）基础饼图][D3 7]

[D3 二维图表的绘制系列（十）环状饼图][D3 8]

[D3 二维图表的绘制系列（十一）南丁格尔图][D3 9]

[D3 二维图表的绘制系列（十二）基础散点图][D3 10]

[D3 二维图表的绘制系列（十三）多符号散点图][D3 11]

[D3 二维图表的绘制系列（十四）气泡图][D3 12]

[D3 二维图表的绘制系列（十五）雷达图][D3 13]

[D3 二维图表的绘制系列（十六）矩形树状图][D3 14]

[D3 二维图表的绘制系列（十七）树图][D3 15]

[D3 二维图表的绘制系列（十八）漏斗图][D3 16]

[D3 二维图表的绘制系列（十九）封闭图][D3 17]

[D3 二维图表的绘制系列（二十）河流图][D3 18]

[D3 二维图表的绘制系列（二十一）仪表盘图][D3 19]

[D3 二维图表的绘制系列（二十二）桑基图sankey][D3 _sankey]

[D3 二维图表的绘制系列（二十三）旭日图][D3 20]

[D3 二维图表的绘制系列（二十四）力导向图][D3 21]

[D3 二维图表的绘制系列（二十五）中国地图][D3 22]

[D3 二维图表的绘制系列（二十六）盒须图][D3 23]

[D3 二维图表的绘制系列（二十七）日历热力图][D3 24]

[D3 二维图表的绘制系列（二十八）关系图-弦图][D3 _-]

[D3 二维图表的绘制系列（二十九）径向树图][D3 25]

[D3 二维图表的绘制系列（三十）平行坐标系折线图][D3 26]

[D3 二维图表的绘制系列（三十一）热力地图（heatMap.js）][D3 _heatMap.js]

[D3 二维图表的绘制系列（三十二）可缩放的封闭图][D3 27]

[D3 二维图表的绘制系列（三十三）可缩放的矩形树图][D3 28]

--------------------

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[Link 1]: https://github.com/zjw666/D3_demo/blob/master/src/chart.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70]: /images/20211109/0c01d5ad4ddd439d884b93a603527581.png
[20190802113638499.png]: /images/20211109/563184550029451c9c12da81cebe8b46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70 1]: /images/20211109/3eb80c1ab6bc404a828f3c178a968669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70 2]: /images/20211109/cb54c6b4fa924d4690227047bd8067c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70 3]: /images/20211109/52ed3e50b7f941ef9ac59892cddc7420.png
[D3]: https://blog.csdn.net/zjw_python/article/details/98201470
[D3 1]: https://blog.csdn.net/zjw_python/article/details/98205614
[D3 2]: https://blog.csdn.net/zjw_python/article/details/98207916
[D3 3]: https://blog.csdn.net/zjw_python/article/details/98209333
[D3 4]: https://blog.csdn.net/zjw_python/article/details/98210977
[D3 5]: https://blog.csdn.net/zjw_python/article/details/98214359
[D3 6]: https://blog.csdn.net/zjw_python/article/details/98478578
[D3 7]: https://blog.csdn.net/zjw_python/article/details/98479641
[D3 8]: https://blog.csdn.net/zjw_python/article/details/98480632
[D3 9]: https://blog.csdn.net/zjw_python/article/details/98480980
[D3 10]: https://blog.csdn.net/zjw_python/article/details/98483109
[D3 11]: https://blog.csdn.net/zjw_python/article/details/98483989
[D3 12]: https://blog.csdn.net/zjw_python/article/details/98485368
[D3 13]: https://blog.csdn.net/zjw_python/article/details/98486655
[D3 14]: https://blog.csdn.net/zjw_python/article/details/98489369
[D3 15]: https://blog.csdn.net/zjw_python/article/details/98492510
[D3 16]: https://blog.csdn.net/zjw_python/article/details/98497967
[D3 17]: https://blog.csdn.net/zjw_python/article/details/98591118
[D3 18]: https://blog.csdn.net/zjw_python/article/details/98592543
[D3 19]: https://blog.csdn.net/zjw_python/article/details/98596174
[D3 _sankey]: https://blog.csdn.net/zjw_python/article/details/98611559
[D3 20]: https://blog.csdn.net/zjw_python/article/details/98613674
[D3 21]: https://blog.csdn.net/zjw_python/article/details/98617650
[D3 22]: https://blog.csdn.net/zjw_python/article/details/98847312
[D3 23]: https://blog.csdn.net/zjw_python/article/details/99581418
[D3 24]: https://blog.csdn.net/zjw_python/article/details/100898040
[D3 _-]: https://blog.csdn.net/zjw_python/article/details/101027698
[D3 25]: https://blog.csdn.net/zjw_python/article/details/101280901
[D3 26]: https://blog.csdn.net/zjw_python/article/details/102802154
[D3 _heatMap.js]: https://blog.csdn.net/zjw_python/article/details/103197579
[D3 27]: https://blog.csdn.net/zjw_python/article/details/105951661
[D3 28]: https://blog.csdn.net/zjw_python/article/details/105953169
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20211109/5340c5a36f5442c69acfc704448641a4.png