Сохранение примера bullet.html из D3.JS в SVG

Я работаю с примером маркерного графика на сайте D3.JS по адресу http://bl.ocks.org/4061961:

введите здесь описание изображения

Моя цель — сохранить саму пулевую диаграмму в виде файла SVG для редактирования в Inkscape. Используя пример rasterize.js с phantom.js, я смог изменить код, чтобы сохранить маркерный график в файл PNG и программно извлечь код SVG и сохранить его в файл. Ниже приведен измененный файл rasterize.js, в котором сохранен код SVG:

var page = require('webpage').create(), address, output, size;


if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                var results = page.evaluate(function(){
                   return document.getElementById('chart').innerHTML
                })
            console.log(results);
            phantom.exit();
        }, 200);
    }
});
}

Приведенный выше JS хранится в «rasterize.js» и передается phantomjs.exe в командной строке для создания файлов SVG и PNG.

> phantomjs.exe rasterize.js bullet.html bullet.png > bullet.svg

Вот ссылка на файл «bullet.svg», хранящийся в GIST: //raw.github.com/gist/4178632/08396404f40210a801ef36aeee526d9f128952a8/bullets.svg Вы можете сохранить этот файл на локальном диске и просмотреть его в браузере.

Однако в том виде, в каком он хранится в настоящее время, этот файл не загружается в Inkscape. Я изменил полученный файл, добавив заголовок ?xml и изменив элементы svg с помощью xmlns, поскольку я также вручную объединил отдельные элементы в один блок.

Что мне не хватает? Как только я выясню, как заставить его работать вручную, мне нужно будет изменить код, который извлекает SVG, чтобы записывать заголовки.

Другие идеи или советы по изменению rasterize.js (выше), чтобы программно написать чистый SVG? Спасибо!


person John Leonard    schedule 30.11.2012    source источник
comment
Это интересный рабочий процесс, с которым у меня нет опыта (кроме бита d3), поэтому я не совсем квалифицирован, чтобы ответить, но... Ваш файл bullets.svg не является чисто SVG, потому что он завернут в <div id="bullets">. Я ожидаю, что это будет шоу для Inkscape, не так ли? Вы пробовали это без этого div?   -  person meetamit    schedule 01.12.2012
comment
О, и я только что заметил, что есть несколько SVG (именно поэтому вы завернули их в div), и я также ожидаю, что это будет проблемой для Inkscape. Если это так, вам придется изменить пример mbostock, чтобы поместить их все в <g>s в одном SVG.   -  person meetamit    schedule 01.12.2012
comment
Возможный способ обойти эту проблему — использовать phantomjs для рендеринга в PDF, а затем конвертировать PDF в SVG.   -  person Lars Kotthoff    schedule 01.12.2012
comment
@lars - Хорошая мысль о предложении PDF. Я перезапустил код с выводом в формате PDF, и новый файл был загружен в Inkscape без ошибок. Я все еще хотел бы увидеть собственное решение SVG, я думаю, я вложился. Спасибо!   -  person John Leonard    schedule 01.12.2012


Ответы (2)


Svg crowbar неплохо справляется с одиночными элементами svg, это просто букмарклет, который вам нужно добавить (работает только на хроме). Он разработан New York Times.

Букмарклет для Chrome, который извлекает узлы SVG и сопутствующие стили из документа HTML и загружает их в виде файла SVG — файла, который можно открыть и отредактировать, например, в Adobe Illustrator. Поскольку SVG не зависит от разрешения, он отлично подходит, когда вы хотите использовать веб-технологии для создания документов, предназначенных для печати (например, на газетной бумаге). Он был создан с учетом d3.js, но он должен работать нормально, независимо от того, как вы решите создать свой SVG.

person Christopher Chiche    schedule 25.06.2013

Вы также можете использовать библиотеку с открытым исходным кодом, которую я только что выпустил, под названием SaveSVG.

person Coola    schedule 22.03.2020