Question

我正在尝试将d3.js中编写的现有d3图表之一与角度5链接起来。

我尝试将D3代码保存在文件 visualization.js 中，并将与 import *相同的内部component.ts文件导入了'./visualization.js'中。 >;并遇到错误TS2306：visualisation.js不是一个模块。

请帮助我解决问题。

注意：我不想将d3.js包装在打字稿类中，这有助于我轻松地集成其他几个d3.js图表，而无需触及其源代码。

Answer 1

已使用以下方法解决了该问题。

1）将d3代码保存到visualization.js中，并导出触发图形创建的主要函数- module.exports = function drawGraph（svgEl，width，height）{//可视化代码}

2）将js函数导入graphWrapper.component.ts文件-从'./visualization.js'中将*作为drawGraph导入;

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样式将不会应用，必须使用全局styles.css或将外部CSS文件链接到angular-cli.json

有关更多说明，请参见以下链接：

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

如何在angular 5中重用现有的Vanilla js d3可视化

1 个答案: