我正在试验这个 Jekyll 主题 http://richbray.me/frap/
我想创建一篇博文来展示这个 D3.js 示例: http://bl.ocks.org/mbostock/4061502
所以主要难点是如何让Markdown渲染脚本让d3.js显示它的内容。 有什么想法吗？
最佳答案
有几种方法可以让它工作:
嵌入 <iframe>
在the d3 example ，有一个嵌入式 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 文件中即可。确保前后各有一个空行。
您还可以添加 width="600" height="400"将属性添加到该 iframe 元素，以便大部分图表都适合 iframe。
定位文档中的 block 元素(例如 <div> 而不是 <body> )
- 更改
var svg = d3.select("body").selectAll("svg")至var svg = d3.select("div#example").selectAll("svg") - 保存
morley.csv(你可以得到它 here )到你的 Jekyll 站点的根目录，然后更改d3.csv("morley.csv", function(error, csv)至d3.csv("/morley.csv", function(error, csv)(将此文件复制到您的 Jekyll 项目中以解决跨站点脚本错误) - 更改
<script src="box.js"></script>至<script src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/box.js"></script> - 创建一个名为
<div id="example"></div>的新元素
我创建了 this Jekyll blog post这说明了如何做到这一点。另外，查看 Matt Shwery's blog post (和 raw markdown )以及另一个 d3/Jekyll 示例。
关于html - 如何将 d3.js 示例嵌入到 Jekyll 博客文章中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22651346/