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

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

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

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

Спасибо!

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

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

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

+15
04 окт. '12 в 2: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 в 3:28
источник

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

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

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

+1
03 мар. '13 в 11: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 в 14:53
источник

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