3 min read

Embedding D3 in Jekyll | 将d3.js代码嵌入Jekyll博客

之前不知道Jekyll里还能嵌入d3.js制作的动态可视化图表,今天Google了一下,发现有人做出了回答:Stack Overflow question,同时又找到了一篇博客介绍怎么写相应的Markdown引用文档的说明。最为关键的是在Markdown文件中添加如下字段(可替换成想引用的图表):

<iframe src="http://bl.ocks.org/mbostock/raw/4061502/" width="650" height="450" frameborder=”0” marginwidth="0" marginheight="0" scrolling="no"></iframe>

现在一个小问题是,如果是我自己用D3画的图,怎么直接放上来而不是通过引用的方式,且待我好好琢磨琢磨。


11月8日更新

今天终于把怎么在Jekyll里插入D3的动态可视化图整了个七七八八,核心是要在图的前后代码处插入<AAA> <\AAA> ,这里字母随意,然后把D3中select“body”之类的命令中的”body”全换成对应的”AAA”。

让我们看个例子:(鼠标拖拽能动噢,画法请右击查看源代码)

另一个例子:

现在还没有解决的一个问题有两个:

  1. 如何给每个图形创建不同的css格式;
  2. 如何引用本地的csv、json等文件来画图,那样才可以创建真正丰富多彩的图形。