初学 D3.js (一)第一印象之helloworld

最近开始尝试着去学习一些数据可视化的技术,虽然我不是做前端的,但我觉得还是有必要掌握一些可视化的技能的,特别是在项目的前期,没有前端和美工帮你的时候,我们需要自己掌握一些可视化的技术,做出一个可以演示的原型系统。

当自己尝试着去学习 D3.js 时,才发现这个学习曲线不是一般的陡峭。这里记下自己刚开始学习的时候,一些简单的理解。或许可能是错误的一些理解,不过我会回过头来修正这些的。

常见的数据可视化的前端类库
  1. Highcharts JS 应用非常广的一个 Javascript 图表类库,经常可以在各类报表应用中看到影子。
  2. jqPlot 也非常的漂亮,最关键的是 Free and Open Source,项目中有些模块已经在用了。
  3. Echarts 百度做的,看上去很漂亮的样子,不过没用过。
  4. LimeJS 一个 HTML5 的游戏框架,以前用它做过一个简单的游戏,也很不错。
  5. 还有很多其他的吧,不过都没有一个个的考察过去。

Why D3.js

没有 why, 没有太多的接触过其他的可视化类库,所以不能进行深入的比较,只是参考网上的评论,随机的选择了 D3.js。到目前为止看上去很不错的样子,基本满足需求。丰富的学习资料、各种 awesome 的例子。直接操作 SVG/DOM,提供最细粒度的对可视化的控制。

What is D3.js

D3 可以将数据绑定到 DOM 中,然后我们可以用这些数据去驱动 DOM 的展示。对于初学者来说,理解将数据绑定到 DOM可能会比较困惑。个人觉得 Mike Bostock 的这篇文章(Thinking with Joins)是理解这个数据绑定的关键。
D3 更多的是操作 SVG,没有提供和 highcharts 类似的 high level 的 API,所以我们在学习 D3 的时候,需要先学习一个 SVG 相关的知识。MDN 是一个很好的参考网站

简单的柱状图

因为是开始接触 D3.js,所以我们也就不挑战高难度,我们先从最简单的 column 开始。
先引入 D3.js

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

body 中加入用来放柱状图的 DIV

<div class="wrapper"></div>
var data = [142, 244, 222, 232, 169, 131, 342];
var height = 300;
var width = 500;
var columnSpan = width / (data.length * 2 + 1);

var svg = d3.select('.wrapper').append("svg").append('g')
  .attr('height', 300)
  .attr('width', 500)
  .attr('fill', 'grey');

svg.selectAll('rect').data(data).enter().append('rect')
  .attr('fill', 'pink')
  .attr('height', function(value, index) {return value;})
  .attr('width', columnSpan)
  .attr('x', function(value, index) {return index * columnSpan * 2 + columnSpan;})
  .attr('y', function(value) {return height - value;});

效果可以点这里
d3-column

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注