javascript - 带有 Angular 2、D3 和 Vizuly 的第三方库

Question

我想与 D3 和 Vizuly 合作创建他们的径向进度条。然而，我正在努力找出将这些 javascript 文件导入到我的组件中的 Angular 方法。你们能帮我想办法让它发挥作用吗？谢谢!

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

 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”之类的类型错误。这是因为您正在用 typescript 编写代码，而 typescript 没有 d3 模块。

所以你需要获得 definition file for d3.js并将其包含在您的打字中。现在 typescript 将知道这个模块并且不会提示。