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

我正在试验这个杰基尔主题

我想创建一篇博客文章，展示D3.js示例：

因此，主要的困难是如何让Markdown渲染脚本，让d3.js显示其内容。

---

有什么想法吗？

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

嵌入一个

在中，有一个嵌入式iframe：

您可以将此更改为

然后，您可以简单地将此iframe行粘贴到标记文件中。确保前后都有空行

您还可以将

width=“600”height=“400”

属性添加到该iframe元素中，以使大部分图表适合该iframe

以文档中的块元素为目标（例如，用

代替

）

• 将

  var svg=d3.select（“body”）.selectAll（“svg”）

  更改为

  var svg=d3.select（“div#example”）.selectAll（“svg”）

• 将

  morley.csv

  （您可以获得它）保存到Jekyll站点的根目录中，然后将

  d3.csv（“morley.csv”，function（error，csv）

  更改为

  d3.csv（“/morley.csv”，function（error，csv）

  （将此文件复制到您的Jekyll项目中以解决跨站点脚本错误）
• 将
  更改为

• 创建一个名为

---

我创建了一个演示如何执行此操作的示例。另外，请查看（和）另一个d3/Jekyll示例。

inframe不再受bl.ocks支持 您将得到以下错误

拒绝在框架中显示“”，因为祖先违反了以下内容安全策略指令：“框架祖先'self'*.ocks.org”

---

您可以尝试使用rawgit.com

可能会有所帮助。因此提供的解决方案是在开始标记后添加一个空的新行。我将尝试并报告，谢谢。多次尝试后，我认为无法正确设置示例。我实际上认为您无法在标记（.md）中嵌入Javascript脚本请证明我错了。幸运的是，@nicksuch的回答证明了我在楼上的陈述是错的。脱帽致敬。好吧，我还能说什么呢。你太棒了！还有这个d3.select（“div#example”）.selectAll（“svg”）是一个真正的d3.js非常棒，我仍然对它很熟悉，想知道更多。同样值得一提的是，我已经改成了另一个Jekyll模板，这个例子非常好。我可能无法在我原来的Jekyll模板上测试，所以不确定它是否在那里工作。在复制粘贴iframe

拒绝显示“http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/”因为祖先违反了以下内容安全策略指令：“框架祖先‘自我’*.ocks.org”。

<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>