Экспорт графиков D3.js в статические файлы SVG, программно

Я генерирую большое количество графиков D3 программно. В настоящее время они состоят из HTML с SVG, CSS и JS.

Я хотел бы экспортировать эти графики в простой SVG программно. Мне сложно понять, как это сделать.

Самое близкое решение, которое я нашел, это следующее: Преобразовать SVG сгенерированный JavaScript в файл - но проблема в том, что мне нужно делать это программно, а не используя инструмент Chrome Developer Tools или SVG Crowbar, который требует ручного нажатия и сохранения.

Я бы предпочел использовать Python, но в этот момент я открыт для любых инструментов/языка программирования.

ОТВЕТЫ

Ответ 1

Вот что я буду делать:

  • Загрузите и установите phantomjs, который является браузером безглавых веб-китов, который вы можете запускать из командной строки и автоматизировать с помощью скриптов.

  • Сохраните этот javascript как renderHTML.js:

    var args = require('system').args,
    page = require('webpage').create(),
    url = args[1];

page.onConsoleMessage = function (msg) {
    console.log(msg);
};

page.onLoadFinished = function() {
    page.evaluate(function() {
        console.log(document.documentElement.outerHTML);
    });
    phantom.exit();
};

page.open(url);

  • Запустите phantomjs с указанным выше script, указав URL-адрес для отображения, например:

    phantomjs renderHTML.js {urltorender} > {localfiletosave}

  • Теперь у вас есть весь HTML-контент документа по указанному URL-адресу, включая изменения динамического контента, выполненные с помощью javascript (до загрузки страницы) в локальном файле. Отправьте локальный файл в соответствии с вашими требованиями, используя любой язык, который вам нравится.

Если вам необходимо внести изменения в javascript перед сохранением файла, вы можете использовать phantomjs api для отправки и/или ожидания событий перед вызовом console.log. Просто измените script на шаге 2.

Если вам известно и нравится javascript, вы можете пропустить шаг 4 и поставить любую "почтовую обработку", которую вы имеете в виду, непосредственно в script на шаге 2.

Ответ 2

Я написал небольшую программу Javascript для этого.

Вы можете отключить его npm, запустив npm install -g playfair (код находится в GitHub в manleyjster/playfair).

Он запускается из командной строки и работает, запуская PhantomJS, указывая его на html файл (который вы передаете в командной строке), а затем захватывает первый элемент SVG, который он находит на странице.

Вы также можете передать идентификатор с помощью параметра командной строки, чтобы выбрать элемент SVG по идентификатору.

Мягкой программой является эта функция:

function getSvg(selector) {
    var svgNode, tmp;

    svgNode = document.querySelector(selector);

    if (svgNode) {
        tmp = document.createElement('div');
        tmp.appendChild(svgNode);
        result = { text: tmp.innerHTML };
    } else {
        result = {};
    }

    return result;
}

Ответ 3

Вы можете сделать это с помощью phantomJS. Его безголовый веб-браузер, поэтому вы можете написать script, чтобы вытащить svg со своей страницы и записать его в файл.