Javascript 具有Angular 2、D3和Vizuly的第三方库

我想与D3和Vizuly一起创建他们的径向进度条。然而，我正在努力找出将这些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);
        });

  }
}

声明常量d3:any；
声明const vizuly：任何；
导入“../../../assets/d3.min.js”；
导入“../../../assets/vizuly_core.min.js”；
//我在下面的文件中得到一个vizuly未定义错误。
导入“../../../assets/vizuly_radialprogress.min.js”；
从“@angular/core”导入{Component，Input}；
@组成部分({
选择器：“circlechart”，
模板：`
`,
样式URL:['./circlechart.scss']
})
导出类CircleChartComponent{
构造函数（）{
让viz_容器；
让我们来看看容器；
让我们来看一下；
viz#U container=d3。选择全部（“viz#U container”）
.样式（“宽度”，“600px”）
.样式（“高度”，“600px”）；
图表容器=d3。选择（“#图表容器”）；
viz=vizuly.viz.radial_progress（document.getElementById（'chart_container'））；
即数据（80）
.min（0）
.最大值（100）
.capRadius（1）；
即startAngle（250）//进度条开始的角度
.endAngle（110）//进度条停止的角度
.arcThickness（.12）//圆弧的厚度（作为半径的比率）
.label（函数（d，i）{//“label”属性允许我们使用动态函数进行标记。
返回d3.格式（“.0f”）（d）；
});
}
}

这里有一个演示用的插件：

正如你所看到的，我没有在组件内部导入d3，它可以工作。 但是，如果您尝试在IDE中执行此操作，则会出现诸如“未知属性/模块d3”之类的类型错误。这是因为您正在用typescript编写代码，而typescript没有d3模块

因此，您需要获得

---

并将其包含在您的打字中。现在typescript将了解此模块，不会抱怨。

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

---

如果您删除组件中的导入，然后只将它们导入index.html

是否有效？我希望它能工作，但给出类型错误没有类型错误，但它不能工作，因为组件中的作用域仍然是错误的。我认为这个组件没有全局范围。我可以让d3工作！他们也有自己的网页模块。维苏利才是问题所在。@jaruesink其实基本上是一样的。。检查plunker，我已经为vizulyI更新了它，我想我用错了viz对象。我没有使用。组件。谢谢你的帮助！

 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");