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

1 介绍

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

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

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

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

初始化后的画布结构如图, 之后的大部分图表主体部分的绘制范围都局限于body中

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值