Как повторно использовать существующую визуализацию vanilla js d3 с angular 5

Я пытаюсь связать одну из существующих диаграмм d3, написанных на d3.js, с angular 5.

Я попытался сохранить код D3 в файле visualization.js и импортировал тот же самый файл внутри component.ts как import * как vis из ./visualization.js; и лицом к ошибка TS2306: visualization.js не является модулем.

Пожалуйста, помогите мне решить проблему.

Примечание: я не хочу заключать d3.js в класс машинописного текста, это помогает мне легко интегрировать несколько других диаграмм d3.js, не затрагивая их исходный код.

🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.


306
1

Ответ:

Решили проблему, используя следующий подход.

1) сохраните код d3 в visualization.js и экспортируйте основную функцию, которая запускает создание графика - module.exports = function drawGraph (svgEl, width, height) {// код для визуализации}

2) импортировать js-функцию в файл graphWrapper.component.ts - импортировать * как drawGraph из './visualization.js';

3) graphWrapper.component.ts в целом:

import * as drawGraph from './temp.js';

// Exports the visualization module
export class BubblesChart {
    target: HTMLElement;
    height: number;
    width: number;
    constructor(target: HTMLElement) {
        this.target = target;
        this.height = 600; //Number(target.getAttribute('height'));//300;
        this.width = 1200; //Number(target.getAttribute('width'));//900;
    }

    render(values: number[]) {
        drawGraph(this.target, this.width, this.height);
    }
}

4) импортируйте graphWrapper.component.ts в любую директиву компонента и вызовите функцию рендеринга.

Примечание: стили component.css не будут применяться, необходимо использовать global styles.css или связать внешний файл css с angular-cli.json

Обратитесь к следующей ссылке для получения дополнительных сведений:

https://www.ibm.com/developerworks/library/wa-custom-vizualizations-angular-d3-trs/index.html#N10118