之前不知道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”。
让我们看个例子:(鼠标拖拽能动噢,画法请右击查看源代码)
//Width and height var w = 600; var h = 300;
//Original data var dataset = { nodes: [ { name: “Adam” }, { name: “Bob” }, { name: “Carrie” }, { name: “Donovan” }, { name: “Edward” }, { name: “Felicity” }, { name: “George” }, { name: “Hannah” }, { name: “Iris” }, { name: “Jerry” } ], edges: [ { source: 0, target: 1 }, { source: 0, target: 2 }, { source: 0, target: 3 }, { source: 0, target: 4 }, { source: 1, target: 5 }, { source: 2, target: 5 }, { source: 2, target: 5 }, { source: 3, target: 4 }, { source: 5, target: 8 }, { source: 5, target: 9 }, { source: 6, target: 7 }, { source: 7, target: 8 }, { source: 8, target: 9 } ] };
//Initialize a default force layout, using the nodes and edges in dataset var force = d3.layout.force() .nodes(dataset.nodes) .links(dataset.edges) .size([w, h]) .linkDistance([50]) .charge([-100]) .start();
var colors = d3.scale.category10();
//Create SVG element var svg = d3.select(“example1”) .append(“svg”) .attr(“width”, w) .attr(“height”, h);
//Create edges as lines var edges = svg.selectAll(“line”) .data(dataset.edges) .enter() .append(“line”) .style(“stroke”, “#ccc”) .style(“stroke-width”, 1);
//Create nodes as circles var nodes = svg.selectAll(“circle”) .data(dataset.nodes) .enter() .append(“circle”) .attr(“r”, 10) .style(“fill”, function(d, i) { return colors(i); }) .call(force.drag);
//Every time the simulation “ticks”, this will be called force.on(“tick”, function() {
edges.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
nodes.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
另一个例子:
现在还没有解决的一个问题有两个:
- 如何给每个图形创建不同的css格式;
- 如何引用本地的csv、json等文件来画图,那样才可以创建真正丰富多彩的图形。