发表新帖
发表新帖

How to embed a d3.js example to the Jekyll blog post?

前端 未结
关注
2 1664
佛祖请我去吃肉
佛祖请我去吃肉 2021-01-31 21:29

I am experimenting with this Jekyll theme http://richbray.me/frap/

And I want to create a blog post showing this D3.js example: http://bl.ocks.org/mbostock/4061502

相关标签:
2条回答
  • 夕颜
    2021-01-31 22:10

    There are a few ways to get this to work:

    Embed an <iframe>

    In the d3 example, there's an embedded iframe:

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

    You can change this to

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

    Then, you can simply paste this iframe line into your markdown file. Make sure that you have an empty line before and after it.

    You can also add width="600" height="400" attributes to that iframe element so that most of the chart will fit in the iframe.

    Target a block element within the document (e.g. <div> instead of <body>)

    • change var svg = d3.select("body").selectAll("svg") to var svg = d3.select("div#example").selectAll("svg")
    • save morley.csv (you can get it here) to the root directory of your Jekyll site, then change d3.csv("morley.csv", function(error, csv) to d3.csv("/morley.csv", function(error, csv) (copy this file into your Jekyll project to resolve cross-site scripting errors)
    • change <script src="box.js"></script> to <script src="http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/box.js"></script>
    • create a new element called <div id="example"></div>

    I created this Jekyll blog post that shows how to do this. Also, check out Matt Shwery's blog post (and raw markdown) with another d3 / Jekyll example.

    0 讨论(0)
  • 南旧
    2021-01-31 22:17

    inframe is no longer supported by bl.ocks you will get the following error

    Refused to display 'http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.ocks.org".

    you can try using rawgit.com

    0 讨论(0)
 看不清?
提交回复
热议问题