0

我正在尝试将用 d3.js 编写的现有 d3 图表之一与 angular 5 链接。

我尝试将 D3 代码保存在文件visualization.js中，并导入与import * as vis from './visualization.js'相同的内部 component.ts 文件；并面临错误 TS2306:visualization.js is not a module。

请帮我解决问题。

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

4

1 回答 1

0

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

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

2) 将 js 函数导入 graphWrapper.component.ts 文件 - import * as drawGraph from './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 样式不会被应用，必须使用全局 styles.css 或链接外部 css 文件到 angular-cli.json

更多解释请参考以下链接：

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

于 2018-07-26T12:57:01.030 回答