OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

我为什么选择 D3.js


分享到


分类 JS开源   关键字 前端   发布 ourjs  1387176008000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

这不是一篇介绍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之旅吧。

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. PayPal为什么从Java迁移到Node.js,性能提高一倍,文件代码减少44%
  2. Node初学者入门,一本全面的NodeJS教程
  3. JS学习:JavaScript的核心
  4. 还有王法吗?还有法律吗?代码女神每天编程9小时
  5. 长时间工作意味着什么
  6. 编写更好的jQuery代码的建议
  7. Python不可维护?终于把一个8万行的Python程序用Java重写了
  8. 我的手游创业路分享
  9. JavaScript教程:Airbnb代码规范
  10. 前狼厂悲催码农的呐喊!
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - JS开源
  1. 我为什么选择 D3.js
  2. Mozilla实验室发布的一款实时协作工具库TogetherJS
  3. 厌倦 Bootstrap 了没?来试试新玩具
  4. 不用HTML/CSS,JS就够了
  5. Tessel 开源硬件正式发布

 关键字 - 前端
  1. 用纯CSS改变html radio/checkbox默认背景颜色样式
  2. css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
  3. 用JavaScript实现basename获取路径中的文件名
  4. CSS垂直水平完全居中手册
  5. 15个最好的HTML5前端响应式框架(2014)
  6. 我被问得最多的十个JavaScript前端面试问题
  7. 5个经典的前端面试问题
  8. 超简易——Bootstrap可关闭tab标签页
  9. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  10. 用css禁用input、checkbox、select等html控件,实现disable效果

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号