d3.js快速⼊门
D3快速⼊门
Data Driven Documents
简介
图表的绘制
在web下，⽀持绘图的有svg和canvas。
百度的echarts是使⽤canvas，阿⾥的AntV的底层绘图G是⽀持svg和canvas(ps:G4.0正在准备⽀持webgl，这样的话可以使⽤显卡增强绘制)。
今天的主⾓d3js是⽀持同时svg和canvas的。
svg与c a nva s
svg是及其形状都是标签形式的，就像提供了很多各种形状，你选择图形给上贴。⽽且每个形状都⽀持事件以及属性。
canvas是给你⼀个画板，给你⼀个笔，调api绘制来绘制图形。
svg可以很轻松的捕捉⿏标事件，⽐如⿏标移⼊到矩形等等。也可以直接操作某个形状的属性。
canvas只能先捕获事件，然后定位，计算是否在某个形状上。绘制⼤数据量时，性能⽐较好。
d3和ec ha r ts
echart是配置式的，需要按照⽂档进⾏配置即可。
d3是需要通过调⽤api，先处理数据转换。绘制，加⼊交互。
所以⽬前推荐在常规交互下的图表使⽤echarts，定制度较⾼或者重交互的图表可以使⽤d3js使⽤svg绘制。
关于⽂档
强烈建议速读⼀遍api⽂档，通过⽂档以及例⼦，就能很快了解实现某种图需要哪些api
详细⽂档请参考：
中⽂⽂档
英⽂⽂档
先来演⽰⼀版
本⽂就以饼图举例，echarts饼图截图：
image.png
写代码之前
假如需要实现这个饼图。我们可以拆解图表：
在上⾯我们看到：有标题，图例，饼图上有：扇形，⽂字，还有浮动框，⿏标hover扇形是有变⼤效果，如果如果数据发⽣变化，我们需要更新。第⼀步 绘制基础结构及初始化相关参数
⾸先是将图表重与数据⽆关的dom结构绘制出来，⽐如：标题，图例，以及定位。
其次我们需要初始化绘制需要的相关对象。⽐如：d3.pies⽤于布局计算，d3.arc⽤于绘制扇形，以及tips。
image.png
第⼆步 更新图表加⼊更新动画
⾸先由于数据量会变，所以我们需要每次更新dom，将多余的dom删除，缺少的dom天加上，保证dom和数量⼀致。数据值的更新，调⽤绘图，重新绘制扇形。
image.png
第三部 加⼊交互
⾸先是饼图中扇形区域⿏标移⼊移出的交互，
其次是图例中矩形点击隐藏/显⽰该数据。
svg canvasimage.png
image.png 这是我们实现的效果。
image.png
在线demo
总结通⽤架⼦
通过这个例⼦，我们可以看到，d3js做图表⽐较⿇烦，所有的内容基本需要⾃⼰调⽤api绘制，正是这样可控性⾼，可以很轻松的实现各种图表定制。
d3实现⼀个交互图表。我们其实都是需要这三步：
第⼀步，初始化，与数据发⽣变化⽆关的相关参数，dom及对象
第⼆步，绘制函数，将数据进⾏绑定，绘制出与数据相关的形状及对象。
第三步，加⼊交互，各种交互事件，定时更新等等。
常见图表的绘制
柱状图，折线，散点图：直接使⽤⽐例尺，即可换算位置和⼤⼩。
d3-chord：制作⽞图
d3.pie：制作饼图，环图，仪表盘
d3-geo：制作地图
d3-force：⼒导图
d3-hierarchy：树图，树矩形图，包等等
d3.histogram：直⽅图
交互类：
d3-zoom：实现缩放
d3-drag：实现拖动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。