【d3.js】canvas下力导向图的缩放平移和拖拽兼容

这个周零散解决了一些的关于d3问题，算是入了门，因而写了博客，顺便也作为周报的内容，所以篇幅会比正常我平时写的周报长很多，详细到代码层面。目前除了这次代码提到的v4，也完成了v6版本对应的代码。

1 从简单做起——html单页面文件开发

目前能找到的很多学习用的demo都是cdn方式引入，直接一个单页面html文件开发，而且出问题也能很方便定位查找，再者v6版本刚出不久，对于诸多api也是有了比较大的改动，讨论度不如有教程的v4，所以为了入门，同时为了避免要下各种各样的d3 npm包，还有考虑各种变量冲突、版本冲突问题，我决定先暂缓V6的学习。

为了更方便测试demo，我对于d3的v4版本采用cdn方式引入。我先选择在Sublime Text3上直接进行一个html文件的单页面测试，一个功能一个功能地学。

2 选择canvas 而非svg

直接从d3 canvas进行入手确实不是一件简单的事情，尽管v4支持canvas，但是api的成熟和灵活度远不如svg方便，毕竟每一个svg就是一个独立的存在对象，但是canvas就单纯是个画布，想要对里面的对象操作不得不考虑鼠标的二维坐标。但是canvas相对于SVG的最大优点是可以创建数千个单独的元素，而不会真正影响性能，因为DOM只能看到一个canvas元素。但是，由于它是基于像素的，所以呈现效果不会像SVG那样清晰。在分辨率不高的旧屏幕上，图像可能看起来有点模糊。

Canvas依赖分辨率、不支持事件处理器、具有弱的文本渲染能力，最适合图像密集型，其中的许多对象会被频繁重绘。SVG不依赖分辨率，支持事件处理器，最适合带有大型渲染区域的应用程序（比如谷歌地图），但是复杂度高会减慢渲染速度（任何过度使用 DOM ）

所以进行大数据可视化的时候，用成千上万的svg会造成dom太多的压力，而canvas在这方面是没有那么大的压力的。

3 d3.json()跨域问题

对于前端老生常谈的