角度为5的d3.js子弹图 - d3.bullet不是一个函数

Question

我正在努力使用d3.js和angular 5.建立子弹图。但是我得到b3.bullet不是一个功能。当我搜索解决方案时，我发现，我们必须添加@ types / d3和一些相关代码。我做过那些事情，但我仍然得到同样的错误。

BulletchartComponent：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';
 @Component({
selector: 'app-bulletchart',
templateUrl: './bulletchart.component.html',
styleUrls: ['./bulletchart.component.css'],
encapsulation: ViewEncapsulation.None
})
export class BulletchartComponent implements OnInit {

margin = { top: 5, right: 40, bottom: 20, left: 120 };
width = 960 - this.margin.left - this.margin.right;
height = 50 - this.margin.top - this.margin.bottom;

chart;

constructor() {

}

ngOnInit() {

this.chart = d3.bullet()
  .width(this.width)
  .height(this.height);

 d3.json("../assets/bulletdata.json", (error, data: any) => {
  if (error) throw error;
  var svg = d3.select("body")
    .data(data)

    .attr("class", "bullet")
    .attr("width", this.width + this.margin.left + this.margin.right)
    .attr("height", this.height + this.margin.top + this.margin.bottom)
    .append("g")
    .attr("transform", "translate(" + this.margin.left + "," + 
    this.margin.top + ")")
    .call(this.chart);

    var title = svg.append("g")
    .style("text-anchor", "end")
    .attr("transform", "translate(-6," + this.height / 2 + ")");

   title.append("text")
    .attr("class", "title")
    .text((d: any) => { return d.title; });

   title.append("text")
    .attr("class", "subtitle")
    .attr("dy", "1em")
    .text((d: any) => { return d.subtitle; });
  console.log(title);
  d3.selectAll("button").on("click", function () {
    svg.datum(this.randomize).call(this.chart.duration(1000));
   });

 });

}

randomize(d) {
   if (!d.randomizer) d.randomizer = this.randomizer(d);
   d.ranges = d.ranges.map(d.randomizer);
   d.markers = d.markers.map(d.randomizer);
   d.measures = d.measures.map(d.randomizer);
   return d;
};

randomizer(d) {

   var k = d3.max(d.ranges) * .2;
   return function (d) {
    return Math.max(0, d + k * (Math.random() - .5));
   };
 }
}

tsconfig.json：

 {
 "compileOnSave": false,
 "compilerOptions": {
 "outDir": "./dist/out-tsc",
 "sourceMap": true,
 "declaration": false,
 "moduleResolution": "node",
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "target": "es5",
 "typeRoots": [
  "node_modules/@types"
],
"types": [
  "d3"
 ],
"lib": [
  "es2017",
  "dom"
]
 }
}

tsconfig.app.json：

    {
       "extends": "../tsconfig.json",
       "compilerOptions": {
       "outDir": "../out-tsc/app",
       "baseUrl": "./",
       "module": "es2015",
       "types": ["d3"]
        },
       "exclude": [
        "test.ts",
       "**/*.spec.ts"
        ]
    }

typings.d.ts：

   /* SystemJS module definition */
  declare var module: NodeModule;
  interface NodeModule {
     id: string;
   }
  declare module 'd3' { let exportAs: any; export = exportAs; }