在本教程中，我们将看到如何集成 D3 与 角度9，同样，我们将创建一个带有虚拟对象的折线图，以了解如何将D3与Angular 9集成在一起。
安装D3.js
使用终端在本地安装D3js npm依赖项。
重击
npm install d3
这将安装在示例中用于创建图表的所有必需方法。
将D3模块导入组件
您可以为图表创建一个单独的组件，例如，我将在应用程序组件本身内部导入模块。
因此，我们要做的第一件事是从D3模块中导入所需的模块，我们将使用它来创建折线图。
app.component.ts
import * as d3 from 'd3';
import * as d3Scale from 'd3';
import * as d3Shape from 'd3';
import * as d3Array from 'd3';
import * as d3Axis from 'd3';
现在，我们创建一些虚拟数据来创建图形。
app.component.ts
import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
...
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
public title= 'Line Chart';
public data: any[] = [
{date: new Date('2010-01-01'), value: 40},
{date: new Date('2010-01-04'), value: 93},
{date: new Date('2010-01-05'), value: 95},
{date: new Date('2010-01-06'), value: 130},
{date: new Date('2010-01-07'), value: 110},
{date: new Date('2010-01-08'), value: 120},
{date: new Date('2010-01-09'), value: 129},
{date: new Date('2010-01-10'), value: 107},
{date: new Date('2010-01-11'), value: 140},
];
}
此外，我们将设置所需的变量
app.component.ts
import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
...
export class AppComponent implements OnInit {
...
private margin = {top: 20, right: 20, bottom: 30, left: 50};
private width: number;
private height: number;
private x: any;
private y: any;
private svg: any;
private line: d3Shape.Line<[number, number]>; // this is line defination
constructor () {
// configure margins and width/height of the graph
this.width = 960 - this.margin.left - this.margin.right;
this.height = 500 - this.margin.top - this.margin.bottom;
}
}
使用角度模板生成D3图表
之后，我们将创建3个单独的方法来使用d3方法生成图表，
方法：
在创建方法之前，让我们向组件HTML添加SVG元素。
app.component.html
<h2>{{ title }}</h2>
<svg width="900" height="500"></svg>
buildSvg（）
此方法将首先添加SVG元素“ g”，然后根据边距定义给出大小。
app.component.ts
...
private buildSvg（） {
this.svg = d3.select('svg') // svg element from html
.append('g') // appends 'g' element for graph design
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
}
...
addXandYAxis（）
之后，我们将分别生成虚拟数据的x轴和y轴。
app.component.ts
...
private addXandYAxis（） {
// range of data configuring
this.x = d3Scale.scaleTime().range([0, this.width]);
this.y = d3Scale.scaleLinear().range([this.height, 0]);
this.x.domain(d3Array.extent(this.data, (d) => d.date ));
this.y.domain(d3Array.extent(this.data, (d) => d.value ));
// Configure the X Axis
this.svg.append('g')
.attr('transform', 'translate(0,' + this.height + ')')
.call(d3Axis.axisBottom(this.x));
// Configure the Y Axis
this.svg.append('g')
.attr('class', 'axis axis--y')
.call(d3Axis.axisLeft(this.y));
}
...
drawLineAndPath（）
之后，我们将绘制线和路径。
app.component.ts
...
private drawLineAndPath（） {
this.line = d3Shape.line()
.x( (d: any) => this.x(d.date) )
.y( (d: any) => this.y(d.value) );
// Configuring line path
this.svg.append('path')
.datum(this.data)
.attr('class', 'line')
.attr('d', this.line);
}
...
最后，在加载组件时即应加载所有此方法 ngOnInit()
app.component.ts
...
public ngOnInit(): void {
this.buildSvg();
this.addXandYAxis();
this.drawLineAndPath();
}
...
将D3与Angular 9完全集成
演示版
获取有关的更多教程 角度9+