云社区 博客 博客详情

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

CSDN 发表于 2020-10-19 22:38:10 2020-10-19
0
0

【摘要】 1 介绍 D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术,让你可以借助于现代浏览器的强大功能自由的对数据进行可视化 学习了d3一个多月,通过绘制一些简单的二维图表,总算入...

1 介绍

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

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

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

chart对象源码请狠狠点击这里(帮忙点个star啦)

初始化后的画布结构如图, 之后的大部分图表主体部分的绘制范围都局限于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 二维图表的绘制系列(三十三)可缩放的矩形树图


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

在这里插入图片描述

文章来源: blog.csdn.net,作者:PAT-python-zjw,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/zjw_python/article/details/98182540

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:JS 判断字符串中是否包含某个字符串(方法总结)

下一篇:如何让在Html中特殊字符不被转义(源码输出)

评论 (0)


登录后可评论,请 登录注册

评论