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

Question

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

Ton*_*ZZZ 14 html5 jekyll d3.js

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

我想创建一个显示这个D3.js示例的博客文章:http: //bl.ocks.org/mbostock/4061502

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

Answer 1

nic*_*uch 13

有几种方法可以让它工作:

嵌入一个 `<iframe>`

在d3示例中,有一个嵌入式iframe:

<iframe src="/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Run Code Online (Sandbox Code Playgroud)

您可以将其更改为

<iframe src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Run Code Online (Sandbox Code Playgroud)

然后,您只需将此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(您可以在此处获取)到您的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>

我创建了这个Jekyll博客文章,展示了如何做到这一点.另外,请查看Matt Shwery的博客文章(和原始markdown)与另一个d3/Jekyll示例.

复制粘贴iframe后出现此错误消息`拒绝在框架中显示'http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/',因为祖先违反了以下内容安全策略指令:"frame-祖先'自我'*.ocks.org".` (2认同)

归档时间：	11 年，5 月前
查看次数：	8796 次
最近记录：	9 年，2 月前

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

嵌入一​​个 <iframe>

定位文档中的块元素(例如,<div>而不是<body>)

嵌入一个 `<iframe>`

定位文档中的块元素(例如,`<div>`而不是`<body>`)