Question

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

我想创建一个显示此D3.js示例的博客帖子： http://bl.ocks.org/mbostock/4061502

所以主要的难点是如何让Markdown渲染脚本让d3.js显示其内容。有什么想法吗？

Answer 1

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

嵌入`<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。

定位文档中的块元素（例如`<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，展示了如何执行此操作。另外，请使用其他d3 / Jekyll示例查看Matt Shwery's blog post（和raw markdown）。

Answer 2

bl.ocks不再支持

inframe 您将收到以下错误

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

您可以尝试使用rawgit.com

Answer 3

您可以在iframe中使用vida.io嵌入功能。它适用于Wordpress，Jekyll和其他博客。您的团队可以在线编辑可视化。不需要git clone，push。

我在此博客文章中描述了详细信息以及如何使您的可视化响应：

Embed d3.js Visualization to Blog

免责声明：我的工作是@ vida.io。

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

3 个答案:

嵌入`<iframe>`

定位文档中的块元素（例如`<div>`而不是`<body>`）

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

3 个答案:

嵌入<iframe>

定位文档中的块元素（例如<div>而不是<body>）

嵌入`<iframe>`

定位文档中的块元素（例如`<div>`而不是`<body>`）