Как вставить пример d3.js в сообщение блога Jekyll?

Я экспериментирую с этой темой Jekyll http://richbray.me/frap/

И я хочу создать сообщение в блоге с этим примером D3.js: http://bl.ocks.org/mbostock/4061502

Таким образом, основная трудность заключается в том, как позволить Markdown отобразить script, чтобы d3.js отображал его содержимое. Любые идеи?

Ответы

Ответ 1

Есть несколько способов заставить это работать:

Вставить <iframe>

В примере d3 есть встроенный 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 в файл уценки. Убедитесь, что у вас есть пустая строка до и после нее.

Вы также можете добавить атрибуты width="600" height="400" к этому элементу iframe, чтобы большая часть диаграммы соответствовала iframe.

Задайте элемент блока внутри документа (например, <div> вместо <body>)

  • измените var svg = d3.select("body").selectAll("svg") на var svg = d3.select("div#example").selectAll("svg")
  • save 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 (и raw markdown) с другим примером d3/Jekyll.

Ответ 2

inframe больше не поддерживается bl.ocks вы получите следующую ошибку:

Отказано в отображении 'http://bl.ocks.org/mbostock/raw/4061502/0a200ddf998aa75dfdb1ff32e16b680a15e5cb01/' в фрейме, потому что предок нарушает следующую директиву политики безопасности содержимого: "self-ancestors" self '*.ocks.org ".

вы можете попробовать использовать rawgit.com

Ответ 3

Вы можете использовать функцию vida.io embed с iframe. Он работает на Wordpress, Jekyll и других блогах. Ваша команда может редактировать визуализацию онлайн. Не нужно клонировать git, нажимать.

Я описываю детали в этом сообщении в блоге и как сделать вашу визуализацию отзывчивой:

Вставить d3.js визуализацию в блог

Отказ от ответственности: я работаю @vida.io.