分享 我为什么选择 D3.js
更新 (2014-01-12)： D3 不是你的菜？看看另外的这些图表工具怎么样吧
这不是一篇介绍 D3 的使用教程，而是只想说说我为什么选择使用 D3，借以思考在面对新的技术的时候我该如何选择。
这段时间我在录制一门课程网页上的图表。录制课程前我调查了一下，应该用哪些工具/库来制作图表。可以确定的是，我要用 svg 来生成图表，而不是用 html5 中的 canvas。开始采用的是Raphaël，一个用来创建和操作网页上矢量图形的 javascript 库。最开始偏向于使用 Raphaël 是因为之前看到的一个很漂亮的页面。在费了几天的时间，经过了很多挫折和参考资料没找到太多的情况下，做出了一个凑合的简单的图表。然后我退缩了，直到我发现了D3。
D3 的缩写是 Data Driven Documents，与 Raphaël 的关系：
相同点
- 都是用 javascript 写的针对矢量图的库
- 都可以对 DOM 节点进行操作，包括绘制，修改，添加动画效果以及图形的交互
不同点
- Raphaël 是一个矢量图的 API，专注于对矢量图形的操作
- D3 是一个数据的 API，专注于数据。将数据与网页中的 svg 元素绑定起来，然后进行一定的操作。比如将一个有 5 个元素的数组与柱状图表中的 5 个 y 坐标值（高度）绑定，然后当数组的数据变化时，柱状图表的高度也会相应的更新
选择 D3 可以从技术层面上来考虑：
- SVG 比较于 Canvas，可以对于 DOM 直接操作
- 对比于 Raphaël，D3 直接对 svg 元素进行操作性能更好
- D3 不兼容老版本的浏览器，而 Raphaël 兼容
另外我觉得让我选择 D3 的最重要的原因就是：她能给我带来一种创作的热情。
热情之一：庞大的用户基数
在 github 上目前的关注（star）人数已经超过了 2 万人，非常受欢迎的项目。github 的图表也是使用 D3 来生成的。越来越多的网站开始使用 D3，越来越多的数据可视化自由职业者开始涌现，越来越多的培训班专门培训 D3.
热情之二：友好开放的社区
D3 本身就是一个开源的库，这种开源的精神也形成了一种乐于分享的社区 (这里和这里)。使用 D3 的人有开发者，有设计师，还有艺术家，一个活跃而不停有思想火花碰撞的社区。D3 的作者本人Mike Bostock也是一个很活跃的人，经常会写一些教程和非常好的实例。
热情之三：大量的资料
虽然 D3 比 Raphaël 的学习难度要大一些，但是 D3 拥有数以千计的实例，大量的教程，我很快的就作出了我想要的东西。
热情之四：美
当我使用 D3 时，我觉得我不但是一个 coder，我还是一个艺术家，我是在创造一种美，给自己带来更大的热情。
你还在等什么，现在就开始你的 D3 之旅吧。
嗯，我最近后台系统的画图表也是用 d3.js 的，综合对比各种图表库，d3.js 是不二选择，常见的图表类型可以用 nvd3.js，复杂点的自己写。各种舒服。
数据驱动文档这种编程方式真是让我大开眼界。
d3 确实不错，但是在移动端就是个大坑，曾经花 3 个月用 D3 写了一个 Portal，结果放在 pad 上跑就 2b 了，现在计划用 canvas 重新写了 p.s.我的 case 比较特殊，l 需要渲染节点比较多，而且动画也较复杂，如果简单的特效，d3 在移动端还是可以用用的 详细可以戳这里 http://www.nickdiakopoulos.com/2012/05/14/visualization-performance-in-the-browser/
D3 基于 SVG，SVG 在 IE9 的支持都相当有限。google code 上有两个 svg 转换的项目，都不尽如人意。 canvas 兼容 IE7 还有方案，将就讲究还能用。
现阶段，可以放弃 IE7，暂时还不能放弃 IE8……
#18 楼 @luckyyang 我指的是 interpolate，domain，quantitative, chord 这些。很多很有用，但是名字你一看很容易就忽略了，文档里面也写得比较晦涩。
#20 楼 @pepsin 有些文档确实挺抽象，这两天深有体会，看了好几遍，感觉在梦游，什么都忘了。不理解。比如说 select 里面的这段，我真晕了：
If values is not specified, then this method returns the array of data for the first group in the selection. The length of the returned array will match the length of the first group, and the index of each datum in the returned array will match the corresponding index in the selection. If some of the elements in the selection are null, or if they have no associated data, then the corresponding element in the array will be undefined.
不错 j̸̛̯̞͎̰̮̻̺̦͔̥̩̪̦̞̺͎͒͊͗̅̌͗ͮà̡̩͙̙͚̩̦̝̰̙̪̻̥̙̻̹̬̟̮̊̑̍͑͌̅ͥ̅ͦ̚̕l̵̟͓͉̦͕̮̠͎̜̬̰̥̣͚̳̅͛̈͐͗̇̈́̎̽ͬ́͒ͩ̽́ḵ̨̛̼̼̥̮̻̅̈̉̑ͧ̈ͪ̊ͣ̔̓̃͂̒̉̄̌̏̕͜͜ḓ̢̦͎̪̫̞͖͍͖̗̜ͣ̿ͫ̓́̋͐ͥ̓͐ͦͧͤ̐ͭͯ̑͟ͅj̭͇̠̬̗̹̟̭̟̯͈̮̭͈̠̥ͭ́ͭ͊̄͐̎̍̓ͪ̄̋̔͗͊͋͊́͂͡ͅf̸̧̛̦̭̝̞̞̗̫̪̮̗̌͑̈̆̅͜ͅn̵̛͋ͤ̐ͦ̽͒̈ͨ̉̋͑̓̾ͭͤ͏̨̢͎͚͚̝̜̞̱͍̖̝̙̼̫̹ŝ͌̀͂ͧ̔̈̏̚҉̯͇̰̳̱̭̥͉͞a̵ͯ̄̈́ͫ̃́̚̚͏̸̥̝͎̘̙̥͇̙̞j̵̛͋̇̀͗͗̓̄̐͐̔̓͋̓ͬ̂҉̣̟̞̦̼͍̭͙̲͈̭̖̤̠̤̳d̛̮̠͉̙̜̟͙͉̗̠̪̰̹̹͛̊ͩͤ̉͛̇ͬ͊̚͢͟n͇̝͖͖̼̳̤͙̣̗͍̣̗̹̈́̿̈͛͒ͬ̚͢͝f̨̪̗̮̰̘̳̰̺̰̠̟͙͗̿̄͒͆̈́̓̂́̀͝͞j̸̠̠̥̮̲̦͉͓̫̙̪͕͙̯͉̖̳͋̈́ͥ̀͑̇͛ͩ͒́̚͝j̴̮̹̞̟͓̥͉͉̻̩̣̺̗͖̦͙̖̫̑̔̇ͮ̌̔ͫͣ͐͆̿̆̄͘̕͜͞ḁ̷̡͖̬͓̰͖̞̬̱̣̺͙̖͓͈̊͛̈́̓̄̓̋ͯ͡͠ṡ̛̬͙̻̭͉̇ͭ̐̆͂̉̃̾̋̈́̾͘k͈̗̗̼̙͙̼͍̩ͧ̈́͗͊͌̍͂̾ͧ͞͞;̡ͯ̏͂͛͆҉̶͓͖̙͎̮͇̖̹͇̩͘f̸̯͙̦̦̮̻̬̬͎͈͕̹̱̩̒̌̇̈́̔ͦͤͮ̂̓͢͡ͅd͌ͧ̂̑̐͏̨̠̣̝̲̭̪͕͍̠̖l̗͍̗̗͉̤̱̩̱̗̹͖ͬ̐ͩͮ͒̓͑ͬͤ̔͋̓͗͆͋̈́̃͠͝j̧̨͒̐̏ͣ̓͞͡͏̱̲̲̘͖̗̱̯̬̞͕̻l̸̐ͤ̂͂̈́̾͋̃̅͗ͣ͊ͬ͊̕͏̳̻̹̱̝̘͢s̈ͭ̓ͣ͒̉̽͋͆̏ͣ̔͐͋͆̽͡͏̛͔͔͉̰͚͖̠͇̲̱͔̙ͅd̴ͥ͆̆ͣ̋ͯ͐ͣ͂ͧ̓̀͘͜͏̖͖̥̭͇̼̥̮̥͎̲̖͖͈ͅͅl̴̛̬͕͚̞̺͍̭̜̇ͦͬ̐̌ͭ̓͒̈́́͠j̨͎̣̗̬̻͓͚̖͓͉̩͙͖̙͉̗͉̳̃̆ͦ̄ͣ̇ͥ̽ͮ̿̆̋ͣ̒̆̕l̛̀ͥ͂ͤ͗̀̆͋̀̚͝҉̥̱̘̖͓̠͔̬̱̥͇̙̥̹̖̺̞ͅk̮̱̮̯͙̲̝͚̯̩͖̝̟͇͓̩̳͍̃͑̃͗̈́ͭ̋ͨ̄ͮͣͫ͒͋͜j̡̯̣̘̲̯͈͍͈ͧͨ̏̽̌͐̔̈ͬͯͧ̀͢͝ͅa̢̝̩̙͇̰̤͈̟̥̩̹̹̝̟͈̥͓̗̽͊̿ͬͧ̽͆̽̉͋̚ͅ
#27 楼 @turingbook 最后一句 If some of the elements in the selection are null
什么情况下是 null 呢？
再结合 selection, elemet, group 这些术语，对于初学者不好理解，至少对于我是这样。不是说 D3 的文档不好，我觉得 D3 的文档是难得的好。
