D3

D3优秀教程：

https://www.dashingd3js.com/binding-data-to-dom-elements

总结—其它的图表工具

D3不是你的菜？ 看看另外的这些图表工具怎么样吧 

http://haoqicat.com/luckyyang/wang-ye-shang-de-tu-biao/13

我为什么选择 D3.js

分享 • luckyyang • 于 2月前发布 • 最后由 luckyyang 于 2天前回复 • 4349次阅读

更新(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之旅吧。

本帖已被设为精华贴！

22人喜欢

共收到 32 条回复

luikore 1楼 , 2月前 1人喜欢

我选 D3 的理由很简单: 虽然和用 canvas 函数裸画几乎没区别, 但是画出来后带有不错的可动性和交互性

pepsin 2楼 , 2月前 1人喜欢

关键是设计好看，漂亮，我是说代码层面。数据处理工具够多，作者的确是把数据置于形式之前的。

luckyyang 3楼 , 2月前 喜欢

#1楼 @luikore 这点也是我非常喜欢的

#2楼 @pepsin Mike还是非常聪明的，他让D3提供了非常大的灵活性，让你随意绑定数据和元素。具体要达成什么效果，靠你的想象了。所以也造就了这么繁荣的社区

muzuiget 4楼 , 2月前 喜欢

嗯，我最近后台系统的画图表也是用 d3.js 的，综合对比各种图表库，d3.js 是不二选择，常见的图表类型可以用 nvd3.js，复杂点的自己写。各种舒服。

数据驱动文档这种编程方式真是让我大开眼界。

bao1018 5楼 , 2月前 1人喜欢

d3确实不错，但是在移动端就是个大坑，曾经花3个月用D3写了一个Portal，结果放在pad上跑就2b了，现在计划用canvas重新写了
p.s.我的case比较特殊，l需要渲染节点比较多，而且动画也较复杂，如果简单的特效，d3在移动端还是可以用用的 详细可以戳这里 http://www.nickdiakopoulos.com/2012/05/14/visualization-performance-in-the-browser/

pepsin 6楼 , 2月前 喜欢

#5楼 @bao1018 移动端是推荐尽量不用JS做动画的。很悲剧。可以试试尽量套CSS动画上去。

jimmykuu 7楼 , 2月前 喜欢

我用在桌面应用上了，PyQt的项目，用的QWebKit，d3.js作图，很不错。

luckyyang 8楼 , 2月前 喜欢

#5楼 @bao1018 节点多的情况更适合canvas吧

lelouchcr 9楼 , 2月前 喜欢

非常简单就能做出很cool的东东，以便达到令人不明觉历的效果～～
http://sandbox.runjs.cn/show/gwgetpwu

nate_yu 10楼 , 2月前 喜欢

当你的元素上千的时候，d3不好使了。

hlxwell 11楼 , 2月前 喜欢

d3是个业余的人写的好像，所以api听说不是那么人性化。

shiny 12楼 , 2月前 喜欢

打算网站的数据监控用 d3 试试。

lazing 13楼 , 2月前 喜欢

D3基于SVG，SVG在IE9的支持都相当有限。google code 上有两个svg转换的项目，都不尽如人意。
canvas兼容IE7还有方案，将就讲究还能用。

现阶段，可以放弃IE7，暂时还不能放弃IE8……

pepsin 14楼 , 2月前 喜欢

#11楼 @hlxwell 不业余，这玩意是他毕业论文好像。在数据可视化这块算是很有思考的一个人了。API不人性主要表现在学术词汇偏多，这也是没办法的，因为这块很多词就只有学术化的讲法。

as181920 15楼 , 2月前 喜欢

什么情况适合d3，什么情况适合highchart？

pepsin 16楼 , 2月前 喜欢

#15楼 @as181920 你对数据展现方式需要有很大自由度的话，用D3。简单的饼图条图，HighChart就够。

luckyyang 17楼 , 2月前 喜欢

#15楼 @as181920 d3是开源和免费的，hightchart商业用途似乎是要收费的

luckyyang 18楼 , 2月前 喜欢

#11楼 @hlxwell 我觉得api设计的很牛啊，抽象的很好
#14楼 @pepsin 学术词汇我觉得也还好，没觉得很学术，比如常用的 enter和exit 这两个词就来源于舞台表演中的上台和下台，很形象

xlgwr 19楼 , 2月前 喜欢

好，D3.

pepsin 20楼 , 2月前 喜欢

#18楼 @luckyyang 我指的是interpolate，domain，quantitative, chord 这些。很多很有用，但是名字你一看很容易就忽略了，文档里面也写得比较晦涩。

luckyyang 21楼 , 2月前 喜欢

#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.

ricky123 22楼 , 2月前 喜欢

不错
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̢̝̩̙͇̰̤͈̟̥̩̹̹̝̟͈̥͓̗̽͊̿ͬͧ̽͆̽̉͋̚ͅ

cloudaice 23楼 , 2月前 喜欢

感觉D3实际用起来没有那么顺。

bao1018 24楼 , 2月前 喜欢

#16楼 @pepsin @as181920 d3下的nvd3不比highchart差,又是开源的，真心没必要再去用highChart

iMom0 25楼 , 2月前 喜欢

#11楼 @hlxwell 好像？听说？

http://bost.ocks.org/mike/

turingbook 26楼 , 2月前 喜欢

插播广告，图灵出了O'Reilly的那本D3书的中文版：http://www.ituring.com.cn/book/1126?q=D3

turingbook 27楼 , 2月前 喜欢

#21楼 @luckyyang 这段话不难懂啊，你哪里不明白？

ld536 28楼 , 2月前 喜欢

好多

luckyyang 29楼 , 2月前 喜欢

#27楼 @turingbook 最后一句 If some of the elements in the selection are null

什么情况下是null呢？

再结合selection, elemet, group这些术语，对于初学者不好理解，至少对于我是这样。不是说D3的文档不好，我觉得D3的文档是难得的好。

linq 30楼 , 2月前 喜欢

mark一下，以后可能需要用到。

leegang 31楼 , 1月前 喜欢

浏览器兼容性的问题怎么解决

luckyyang 32楼 , 2天前 喜欢

#31楼 @leegang D3 is for modern browser. 所以兼容性问题它不管啊。