Графики d3.js выводятся в файлы качества печати высокого разрешения?

Есть ли способ вывода графиков, диаграмм, карт и т.д., созданных в html/js на основе d3.js, в другой формат данных с высоким качеством печати публикации?

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

Форматы вывода, которые я ищу, должны быть прочитаны в Illustrator или Photoshop. И наиболее предпочтительно без дополнительной визуальной манипуляции, необходимой после экспорта. Было бы действительно победить цель, если мне придется переписывать или пополнять цвет или rephotoshop, чтобы получить эффект.

Спасибо!

28
04 окт. '12 в 5:24
источник поделиться
4 ответов

Существуют более сложные методы, но быстрый и простой способ - просто скопировать элемент svg из DOM (возможно, вам придется включить и ваши файлы css), вставьте его в файл и сохраните его с расширением .svg, После этого вы можете открыть его в векторном редакторе.

Также есть способы конвертировать вывод d3.js в файл png. Кто-то собрал jsfiddle для этого с canvg в http://jsfiddle.net/plaliberte/HAXyd/.

15
04 окт. '12 в 5:29
источник

Современные браузеры поддерживают атрибут download в ссылках. Если вы создадите ссылку на изображение с атрибутом download, браузер загрузит его, а не откроет его в браузере.

Поскольку нет фактического файла для загрузки, вам нужно закодировать вашу строку svg как data-uri. Все, что вам нужно сделать, это...

var download = d3.select("body").append("a").attr("href", "#")

download.on("click", function(){
      d3.select(this)
        .attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select("#viz").html()))
        .attr("download", "viz.svg") 
    })

Вы можете увидеть демонстрацию здесь http://bl.ocks.org/3831266 вы можете без проблем открыть загруженный файл в иллюстраторе.

Однако есть несколько ошибок: вы должны объявить свои стили inline (вы не можете использовать стиль с помощью таблицы стилей css).

Быстрое и грязное решение заключается в выводе кода svg в поле предупреждения:

download.on("click", function(){
  alert(d3.select("#viz").html())
});

И скопируйте оповещение в текстовый файл и сохраните его как svg.

13
04 окт. '12 в 6:28
источник

Для моего графика d3 предлагаемые решения не работают. Некоторые из свойств полученного SVG экспорта (для исключения градиентов) не отображаются правильно и выглядят очень сильно, чем показывает Chrome.

В моем случае изображение было статичным, поэтому скриншота могло быть достаточно. Тем не менее, снимок экрана ограничен размером монитора, над которым вы работаете. Тем не менее, я рад, что нашел альтернативное решение, webkit2png: http://www.paulhammond.org/webkit2png/

Этот инструмент позволяет создавать скриншоты веб-сайтов по мере их просмотра на экране произвольного размера. Он идеально подходит для преобразования статических графиков d3. Надеюсь, это может помочь кому-то, поскольку это помогло мне.

1
03 марта '13 в 14:26
источник

Если вы с удовольствием сохраняете растровое изображение с высоким разрешением, я нашел лучшее решение для использования Pearl Crescent Page Saver, Firefox addon:

https://addons.mozilla.org/en-US/firefox/addon/pagesaver/

Базовая версия дает вам возможность масштабировать изображение - например, масштабирование до 200% увеличит разрешение .png, чтобы удвоить (в 4 раза больше пикселей) то, что вы получили бы с помощью простого снимка экрана.

Если вам нужны векторы, и загрузка svg в Illustrator не работает для вас, вы можете попробовать выполнить рендеринг в супер hi res png, а затем использовать Illustrator Live Trace...

0
26 янв. '14 в 17:53
источник

Посмотрите другие вопросы по меткам или Задайте вопрос