d3 基础介绍

d3工作原理

d3是使用js语法去操作dom元素进行绘制图表；如果熟悉jquery语法可以很快的上手使用，学习d3需要熟悉以下相关知识：

• DOM API 与 事件模型 （掌握js操作dom的相关语法）
• css 相关知识(样式 选择器select 元素属性property )
• svg 绘图和相关技巧(rect矩形 circle 圆 line线段 path路径等)

d3的优缺点：

• 优点个人觉得是可以画出任意设计图形，图表制作的自由度非常大
• 缺点 学习门槛比较高，需要有一定的前端基础才可以学习
• 官网是全英文的，没有英文基础（比如我）就只能在网上找一堆教程慢慢学，所以学好英文很重要很重要！
• 性能问题，如果页面使用大量的svg会造成dom渲染的效能瓶颈，现在已经很多图表改用cavas进行呈现了，
• 版本问题，如果代码没错但效果就是出不来，百分之九十的问题就是版本错了。

如果觉得学起来比较困难，可以使用如下网站，会比较友好

• e-charts （百度出品，就是一些复杂效果调起来很烦，而且文档也不清晰，需要自己慢慢调)
  - charts.js 外文网站，入门比较简单，使用谷歌浏览器一键翻译成中文还可以看下去
• C3.js 同上

相关资源：

1. D3官方API文件
   2. D3 Observal
2. d3中文文档（v5版本的)