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

 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中执行此操作，则会出现类型错误，例如＆＃34;未知属性/模块d3＆＃34;。那是因为你在typescript中编写代码而typescript没有d3模块。

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

Answer 2

对于d3库，有人已经基于d3库制作了Angular2组件。

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

带有Angular 2，D3和Vizuly的第三方图书馆

2 个答案: