如何在Jekyll博客文章中嵌入d3.js示例？ [英] How to embed a d3.js example to the Jekyll blog post?

问题描述

我正在试验这个Jekyll主题
http://richbray.me/frap/

I am experimenting with this Jekyll theme http://richbray.me/frap/

我想创建一篇博文，展示这个D3.js示例：
http ：//bl.ocks.org/mbostock/4061502

And I want to create a blog post showing this D3.js example: http://bl.ocks.org/mbostock/4061502

所以主要的难点是如何让Markdown渲染脚本让d3.js显示它的内容。
任何想法？

So the main difficulty is how to let Markdown render the script to let d3.js show its contents. Any ideas?

推荐答案

有几种方法可以让它发挥作用：

There are a few ways to get this to work:

在 d3示例，有一个嵌入式iframe：

In the d3 example, there's an embedded iframe:

<iframe src="/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/" marginwidth="0" marginheight="0" scrolling="no"></iframe>

您可以将此更改为

<iframe src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/" marginwidth="0" marginheight="0" scrolling="no"></iframe>

然后，您只需将此iframe行粘贴到markdown文件中即可。确保前后有空行。

Then, you can simply paste this iframe line into your markdown file. Make sure that you have an empty line before and after it.

您还可以添加 width =600height =400属于该iframe元素的属性，以便大部分图表都适合iframe。

You can also add width="600" height="400" attributes to that iframe element so that most of the chart will fit in the iframe.

• 更改 var svg = d3.select（body）。selectAll（svg） to var svg = d3.select （div＃example）。selectAll（svg）


• 保存 morley.csv （你可以这里）到你的Jekyll网站的根目录，然后改变 d3.csv（morley.csv，函数（错误，csv）到 d3.csv（/ morley.csv，函数（错误， csv）（将此文件复制到您的Jekyll项目中以解决跨站点脚本错误）


• 更改< script src =box的.js> ;< / script> 到< script src =http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/box.js> < / script>


• 创建一个名为的新元素< div id =example>< / div>

• change var svg = d3.select("body").selectAll("svg") to var svg = d3.select("div#example").selectAll("svg")
• save morley.csv (you can get it here) to the root directory of your Jekyll site, then change d3.csv("morley.csv", function(error, csv) to d3.csv("/morley.csv", function(error, csv) (copy this file into your Jekyll project to resolve cross-site scripting errors)
• change <script src="box.js"></script> to <script src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/box.js"></script>
• create a new element called <div id="example"></div>

我创建了这个Jekyll博客文章，展示了如何做到这一点。另外，请查看 Matt Shwery的博客文章（以及原始降价）与另一个d3 / Jekyll示例。

I created this Jekyll blog post that shows how to do this. Also, check out Matt Shwery's blog post (and raw markdown) with another d3 / Jekyll example.

这篇关于如何在Jekyll博客文章中嵌入d3.js示例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！