Я пытаюсь связать одну из существующих диаграмм d3, написанных на d3.js, с angular 5.
Я попытался сохранить код D3 в файле visualization.js и импортировал тот же самый файл внутри component.ts как import * как vis из ./visualization.js; и лицом к ошибка TS2306: visualization.js не является модулем.
Пожалуйста, помогите мне решить проблему.
Примечание: я не хочу заключать d3.js в класс машинописного текста, это помогает мне легко интегрировать несколько других диаграмм d3.js, не затрагивая их исходный код.
🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.
Решили проблему, используя следующий подход.
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