Javascript 如何使用angular 5重用现有的vanilla js d3可视化

我试图将d3.js中现有的一个d3图表与angular 5链接起来

我尝试将D3代码保存在一个文件visualization.js中，并从“/visualization.js”导入了与vis相同的内部component.ts文件；面对错误TS2306:visualization.js不是一个模块

请帮我解决这个问题

---

注意：我不想将d3.js封装在一个typescript类中，这有助于我轻松集成其他几个d3.js图表，而无需涉及它们的源代码。

使用以下方法解决了这个问题

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

2） 将js函数导入graphWrapper.component.ts文件-import*作为“/visualization.js”中的drawGraph

3） 图形rapper.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

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