Подтвердить что ты не робот

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

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

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

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

Спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Современные браузеры поддерживают атрибут 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.

Ответ 3

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

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

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

Ответ 4

Если вы с удовольствием сохраняете растровое изображение с высоким разрешением, я нашел лучшее решение для использования 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...