使用 Angular 2、D3 和 Vizuly 的第 3 方库答案

【问题标题】：3rd Party Library with Angular 2, D3 and Vizuly使用 Angular 2、D3 和 Vizuly 的第 3 方库
【发布时间】：2016-11-04 05:13:18
【问题描述】：

我想与 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);
        });

  }
}

【问题讨论】：

如果您删除组件中的导入并将它们导入 index.html <head> 是否有效？我希望它可以工作，但会出现类型错误
没有类型错误，但它不起作用，因为组件内的范围仍然错误。我不认为该组件具有全局范围。

标签： javascript angular d3.js ecmascript-6 webpack

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

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

【讨论】：

我可以让 d3 工作！他们也有自己的 webpack 模块。问题在于 Vizuly。
@jaruesink 实际上基本上是一样的。检查 plunker，我已经为 vizuly 更新了它
我让它工作了，我想我有错误的 viz 对象。我没有使用.component。感谢您的帮助！

【解决方案2】：

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

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

【讨论】：