我正在试验这个Jekyll主题 http://richbray.me/frap/
我想创建一个显示此D3.js示例的博客帖子： http://bl.ocks.org/mbostock/4061502
所以主要的难点是如何让Markdown渲染脚本让d3.js显示其内容。 有什么想法吗？
答案 0 :(得分：13)
有几种方法可以让它发挥作用：
<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）。
答案 1 :(得分：3)
inframe 您将收到以下错误
拒绝在框架中显示“http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/”，因为祖先违反了以下内容安全政策指令：“frame-ancestors'self'* .ocks.org”。
您可以尝试使用rawgit.com
答案 2 :(得分：-2)
您可以在iframe中使用vida.io嵌入功能。它适用于Wordpress，Jekyll和其他博客。您的团队可以在线编辑可视化。不需要git clone，push。
我在此博客文章中描述了详细信息以及如何使您的可视化响应：
Embed d3.js Visualization to Blog
免责声明：我的工作是@ vida.io。