D3.js(Data-Driven Documents) 是 javascript 的一个库,用以做基于浏览器的数据可视化。D3 功能强大,能够做出非常炫酷的可视化作品,语法也相当简洁易学。因此,倘若能在 Octopress 博客中加入D3,想必是极好的。

如何做呢,其实也简单,下载 D3, 将 d3.v3.js 放到 source/javascripts 目录下,
然后在 source/_includes/head.html 中,在加载 octopress.js 的那一行之后,加上下面这一句

1
<script src="{{ root_url }}/javascripts/d3.v3.js" type ="text/javascript"> </script>

这样就不用每次手动加入D3的头部依赖了。然后要做的就是在文章中加入D3代码,如下

1
2
3
<scipt type ="text/javascript">
// D3 codes 写在这里
</script>

不过这里有一点需要特别注意的地方:D3中的

1
d3.select("body")

是一条常见的语句,但在博客中最好不要这样用,因为这里 body 指的是最后生成的 html 的 body,而 rake generate 生成的 html 文档中,body 部分还加入了许多东西,比如侧边栏啊什么的,所以,最好自己写一个如下的 div

1
2
<div id='#body1'>
</div>

然后用

1
d3.select("#body1")

这样,按照 id 选取,就能把 D3 能够影响的范围控制在具有该 id 的 div 之中。

下面看个例子吧。


可以拖动的点,用鼠标拖住点移动,或者点击/双击,看看会发生什么—–

怎么样,还不错吧,反正我是醉了。

后记

不学D3很久了,上面例子是抄的别人的代码。以后会慢慢把 D3 等有趣的东西捡起来,并用它们做些有趣的东西出来。

更新 2015-05-21

博客框架切换到 hexo 后,由于 hexo 也不会处理 <script等 html 标签,所以这篇文章中的例子还是能够如常展示;然而,由于一些我暂时还未解决的问题,原本文章中一次展示了两个例子,现在只能有一个,只好将第二个滑动的蛇的例子放到下一篇中去了。此外,D3.js 也是链接到官方库,而不是使用本地资源。