分享 我为什么选择 D3.js

luckyyang · 2013年12月16日 · 最后由 mengnaseye 回复于 2016年06月27日 · 41764 次阅读
本帖已被管理员设置为精华贴

更新 (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 的理由很简单: 虽然和用 canvas 函数裸画几乎没区别, 但是画出来后带有不错的可动性和交互性

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

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

#2 楼 @pepsin Mike 还是非常聪明的,他让 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/

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

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

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

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

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

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

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

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

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

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

什么情况适合 d3,什么情况适合 highchart?

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

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

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

好,D3.

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

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

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

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

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

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

什么情况下是 null 呢?

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

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

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

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

#5 楼 @bao1018 写代码的过程中,没在 ipad 跑测试?

#9 楼 @lelouchcr 您发的效果使用哪个组件做出来的?

canvas 处理大数据可视化比 d3 要优秀,svg 在 dom 里形成的元素太多。

assyer 这个属于 bug 还是眼睛花了? 提及了此话题。 04月03日 10:57
需要 登录 后方可回复, 如果你还没有账号请 注册新账号