Edit：几周后，我有了更好的理解，也许可以给出一些更好的指示，所以这里是：
生成Angular项目后，安装dc、它的类型文件以及所有需要的依赖项，如下所示：
npm i --save dc @types/dc crossfilter2 d3 @types/d3
注意@类型/交叉过滤器不需要，因为 crossfilter 开始直接在其包内提供自己的类型文件。
之后您可以导入dc, 交叉过滤器, and d3通过将它们导入到组件中并像这样使用它们：
组件.html:
<div #nameOfDiv></div>
组件.ts
import * as d3 from 'd3';
import * as dc from 'dc';
import * as crossfilter from 'crossfilter2';
import {Dimension} from 'crossfilter2';
export class Graph {
@ViewChild('nameOfDiv') chartDiv: ElementRef;
private ndx: Dimension<T> = crossfilter<T>([{...}, {...}]);
[...]
paint() {
let chart = dc.scatterPlot(this.chartDiv.nativeElement);
chart.render();
}
}
最后不要忘记包含 dcjs css 样式表，无论是在旧答案中编写的 index.html 中还是在您想要的任何地方。
旧答案：
我目前处于同一点，对纯 html 和 js 中的 dc.js、d3.js 和 crossfilter2 有一些有限的经验。现在我想在 Angular 5 中使用 dcjs。
我刚刚通过安装 dc、d3 和 crossfilter 的 @types 文件并将实际库包含在 index.html 标头中，在组件中绘制了第一个模拟示例。
索引.html
<head>
[...]
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.5/crossfilter.js" rel="script"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.css" />
</head>
NG安装
ng install --save @types/dc
ng install --save @types/d3
ng install --save @types/crossfilter
组件.ts
import * as dc from 'dc';
import * as CrossFilter from 'crossfilter';
interface Data {
date: string;
quantity: number;
[...]
}
export class GraphComponent {
private chart: dc.PieChart;
private ndx: CrossFilter.CrossFilter<Data> = crossfilter<Data>([{ date: '2011-11-14T16:17:54Z', quantity: 2, total: 190, tip: 100, type: 'tab' }, {...}])
paintChart(): void {
this.chart = dc.pieChart('#id__html_div');
let dim = this.data.dimension((d) => d.date);
let group = dim.group().reduceCount();
this.chart.width(200).height(200).dimension(dim).group(group);
dc.renderAll();
}
}
希望这有所帮助。所有这些只是我在过去几个小时内所做的，这并不意味着这是预期的方法或最好的方法。我也是 Angular 和 dcjs 的新手..
