帶有角度2，D3和Vizuly的第三方庫

Question

我想與D3和Vizuly一起創建他們的徑向進度條。不過，我正在努力找出Angular的方式來將這些JavaScript文件導入到我的組件中。你們能幫我找出一種方法讓這個工作起作用嗎？謝謝！

declare const d3:any; 
declare const vizuly:any; 
import '../../../assets/d3.min.js'; 
import '../../../assets/vizuly_core.min.js'; 
// I am getting a vizuly not defined error in the file below. 
import '../../../assets/vizuly_radialprogress.min.js'; 

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'circlechart', 
    template: ` 
    <div class="container"> 
    <div id="viz_container"> 
     <div id="chart_container"></div> 
    </div> 
    </div> 
    `, 
    styleUrls: ['./circlechart.scss'] 
}) 
export class CircleChartComponent { 
    constructor() { 

    let viz_container; 
    let chart_container; 
    let viz; 

    viz_container = d3.selectAll("#viz_container") 
     .style("width", "600px") 
     .style("height","600px"); 

    chart_container = d3.select('#chart_container'); 

    viz = vizuly.viz.radial_progress(document.getElementById('chart_container')); 

    viz.data(80) 
      .min(0) 
      .max(100) 
      .capRadius(1); 

    viz.startAngle(250)  // Angle where progress bar starts 
     .endAngle(110)   // Angle where the progress bar stops 
     .arcThickness(.12)  // The thickness of the arc (as a ratio of radius) 
     .label(function (d,i) { // The 'label' property allows us to use a dynamic function for labeling. 
      return d3.format(".0f")(d); 
     }); 

    } 
} 

Answer 1

這裏有一個plunker用於演示：Plunker

d3.select("div") 
     .transition().duration(500).style("width","500px") 
     .transition().duration(500).style("height","500px") 
     .transition().duration(500).style("color","red") 
     .transition().duration(500).style("background-color","red"); 

正如你可以看到我沒有導入組件內部D3和它的作品。 但是，如果您嘗試在您的IDE中執行此操作，將會出現類似「未知屬性/模塊d3」的錯誤。這是因爲您正在使用打字稿編寫代碼，打字稿中沒有d3模塊。

因此，您需要獲得 definition file for d3.js 並將其包含在您的類型中。現在打字稿會知道這個模塊，不會抱怨。

Answer 2

對於d3庫，有人已經基於d3庫製作了Angular2組件。

https://www.npmjs.com/package/ng2-nvd3