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

148
23

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


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


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

спросил(а) 2014-03-26T07:14:00+04:00 6 лет, 6 месяцев назад
1
Решение
148

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


Вставить <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 Shweryraw markdown) с другим примером d3/Jekyll.

ответил(а) 2014-03-26T21:07:00+04:00 6 лет, 6 месяцев назад
70

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


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

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

ответил(а) 2016-07-10T02:20:00+03:00 4 года, 2 месяца назад
-6

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


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


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


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

ответил(а) 2014-06-01T20:49:00+04:00 6 лет, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема