为了在 Hexo 系统的 markdown
正文中测试 D3
的可用性,移植了一个咖啡风味轮
的可视化,如下:
Coffee Flavour Wheel
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> |
代码注释:
- 第一行装载
D3
包。 - 第二行,插入绘图区域,这里的绘图区域是用
div#viz
来定位并操作 - 第三行,引用绘图用代码,保存在
Hexo
博客系统的js
文件夹下,会被同步到 github。当然你也可以通过用<script></script>
直接嵌入本页。个人更推荐单独存放,避免 markdown 页面太长。
编写小贴士
- 改动
md
文件后直接看效果:对 DOM 的attr
和style
编写,更改无需hexo d
,hexo d
,就可以在hexo s
开启状态的浏览器中查看。写可视化代码时候,需要经常看改动带来的变化,此时可以省去前述的两步。 - 在 md 文件中编写并测试
js
代码:使用hexo s
测试中,代码需要写在页面内测试。测试完毕后再移动到独立文件。因为 gihub 处的代码改动需要git commit
,git push
之后才会生效。如果每次改动后都进行前面 2 项操作,则无妨。这里的问题在于,hexo s
状态下,无法引用本地的文件。这个问题在图片的引用代码中,也是让人不爽。 - 模块化:重复使用的 js 代码,尽量放在一处,引用到每个页面,减少维护的复杂度。
目前,文章页面的 CSS
还是无法通过嵌入正文生效。需要 D3 直接写入 DOM
的属性。
D3
在本站嵌入成功后,我就可以做一些可视化的学习笔记。这样,在笔记里面,就可以添加实时的演示了。
本次嵌入的可视化来自这里。