如何将d3.js示例嵌入到Jekyll博客文章中？

Question

如何将d3.js示例嵌入到Jekyll博客文章中？

htmld3.jsjekyll

14

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

并且我想创建一个博客文章，展示这个D3.js的例子：http://bl.ocks.org/mbostock/4061502

所以主要的困难是如何让Markdown渲染这个脚本，使得d3.js能够展示它的内容。有什么想法吗？

- TongZZZ

这个问题可能有所帮助：https://dev59.com/AXE85IYBdhLWcg3wejjn - Lars Kotthoff

所提供的解决方案是在开标签后添加一个空的新行。我会尝试并报告，谢谢。 - TongZZZ

经过多次尝试，我认为我无法正确地设置一个示例。实际上，我认为你不能将Javascript脚本嵌入到Markdown (.md)文件中并渲染和执行它以展示它是什么。请证明我错了。 - TongZZZ

幸运的是，@nicksuch的回答证明了我之前说的话是错的。向他致敬。 - TongZZZ

2个回答

4

inframe已不再被bl.ocks支持，您将会收到以下错误信息

因为祖先违反了以下内容安全策略指令："frame-ancestors 'self' *.ocks.org"，所以拒绝在框架中显示'http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/'。

你可以尝试使用rawgit.com。

- Raj Vansia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nicksuch · Accepted Answer

有几种方法可以让这个工作：

嵌入一个`<iframe>`

在d3示例中，有一个嵌入的 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文件中。确保在它前后都有空行。
你也可以给该iframe元素添加width="600" height="400"属性，以便大部分图表适合于iframe。
目标是文档内的块级元素（例如<div>而不是<body>）：
- 将var svg = d3.select("body").selectAll("svg")改为var svg = d3.select("div#example").selectAll("svg") - 将d3.csv("morley.csv", function(error, csv)更改为d3.csv("/morley.csv", function(error, csv)，并保存morley.csv（你可以在这里获取它）到你的Jekyll站点的根目录中（将此文件复制到您的Jekyll项目中以解决跨站脚本错误） - 将<script src="box.js"></script>更改为<script src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/box.js"></script> - 创建一个名为<div id="example"></div>的新元素。
我创建了这篇Jekyll博客文章，展示了如何实现这一点。另外，请查看Matt Shwery的博客文章(以及原始markdown)中的另一个d3 / Jekyll示例。

如何将d3.js示例嵌入到Jekyll博客文章中？

嵌入一个<iframe>

嵌入一个`<iframe>`