d3.js: запустить один и тот же код в приложении Angular и в файле node.js

Question

Мне нужно добавить инфографику в приложение Angular 5. Я выбрал d3.js для этого. Мне также нужно иметь возможность экспортировать графики, то есть создавать SVG с Node и оборачивать их в PDF.

К счастью, довольно просто сделать код, который заставляет работать граф d3 в браузере на node.js. Следующие строки делают это ...

const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

После этого требуются только незначительные изменения в коде, который работает в браузере.

Очевидно, что я не хочу иметь 2 копии почти одного и того же кода, поэтому мне нужен способ организовать использование функций, которые создают SVG (я бы предпочел, чтобы это был Typescript, а не javascript) на обеих сторонах приложения. и узел приложения на стороне. К сожалению, у меня нет большого опыта работы с Node, и я не вижу простого решения для этого.

Вот мои вопросы ...

1. Как я могу просто организовать использование функций, которые создают SVG с использованием d3, приложениями angular 5 и node.js?
2. Может быть, рендеринг d3.js с узлом - не лучшее решение, а есть другое, более простое?

Заранее спасибо!

Answer 1

Я хотел бы предложить следующее решение.

Прежде всего, независимо от того, какой интерфейс вы сейчас используете. Если я правильно понял вашу идею, вам нужно иметь рисунок / скриншот диаграммы d3js , чтобы использовать ее в PDF в будущем . Это правильно?

Вам нужно написать утилиту, чтобы иметь возможность открывать реальную веб-страницу с компонентом диаграммы и делать снимок экрана (с желаемым разрешением). Это может быть, например, комбинация транспортира с браузером Chrome. , (существует множество решений, на самом деле, мы могли бы даже использовать PhantomJS . По моему опыту, использование Транспортир проще и проще в реализации). Кроме того, Транспортир имеет внутреннюю функцию, позволяющую делать скриншоты страницы и сохранять ее в определенной папке.

Какие преимущества мы получаем благодаря этому решению:

• единственное место с исходным кодом, связанным с рендерингом диаграммы
• 100% уверены, что просмотр графика такой же, как и на реальной веб-странице (с другие угловые компоненты)
• нам не нужно искать способ рендеринга SVG на стороне Node.JS и т. Д. ...

Работа может выглядеть следующим образом:

• Запустите задачу NPM / Gulp / Grunt (что угодно), чтобы открыть страница вашего веб-приложения с помощью браузера Protractor и Chrome.
• Открыть фиктивную страницу только с компонентом диаграммы + слой данных.
• Сделайте скриншот и сохраните в определенную папку. Используйте скриншот диаграммы внутри PDF (вручную или с помощью другого инструмента)

Answer 2

Если вы хотите сделать это на стороне сервера, у вас может быть API, который будет генерировать графику и возвращать элемент. Вы можете напрямую подключить его к пользовательскому интерфейсу, а также использовать ту же функцию для генерации PDF.