我正在尝试这个 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 行粘贴到您的降价文件中即可。确保前后各有一个空行。
您还可以向该 iframe 元素添加 width="600" height="400" 属性，以便大部分图表都适合 iframe。
<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 示例。
【讨论】：
Refused to display 'http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.ocks.org".后收到此错误消息@
bl.ocks 不再支持 inframe 你会得到以下错误
拒绝在框架中显示“http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/”，因为祖先违反了以下内容安全策略指令：“frame-ancestors 'self' *.ocks.org”。
您可以尝试使用 rawgit.com
【讨论】：