在Angular 4应用程序中包含d3图

npm install d3 --save

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-d3-chart',
  template: `<div #chartContainer></div>`,
})
export class D3ChartComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    this.createChart();
  }

  createChart() {
    const data = [4, 8, 15, 16, 23, 42];
    const svg = d3.select('#chartContainer').append('svg')
      .attr('width', 500)
      .attr('height', 300);

    svg.selectAll('rect')
      .data(data)
      .enter().append('rect')
      .attr('x', (d, i) => i * 70)
      .attr('y', (d) => 300 - d * 5)
      .attr('width', 65)
      .attr('height', (d) => d * 5)
      .attr('fill', 'steelblue');
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { D3ChartComponent } from './d3-chart.component';

@NgModule({
  declarations: [
    D3ChartComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [D3ChartComponent]
})
export class AppModule { }