如何在angular 5中重用現有的Vanilla js d3可視化

Question

我正在嘗試將d3.js中編寫的現有d3圖表之一與角度5鏈接起來。

我試圖將D3代碼保存在文件visualization.js中，並從'./visualization.js'導入了與import *相同的內部component.ts文件； 並面臨錯誤TS2306：visualisation.js不是模塊 。

請幫助我解決問題。

注意：我不想將d3.js包裝在typescript類中，這有助於我輕松地集成其他幾個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導入任何組件指令並調用render函數。

注意：component.css樣式將不會應用，必須使用全局styles.css或將外部css文件鏈接到angular-cli.json

請參閱以下鏈接以獲取更多說明：

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