带有角度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