javascript - 如何将 bullet.js 文件写入 bullet.ts 或如何在 angular2 中创建子弹图

Question

如何在下面的链接中处理 bullet.js 我正在使用链接（下面）在 angular2 中创建子弹图。

我创建了一个 bulletchartcomponent 并想绘制 bulletchart 。任何人都可以在 plunker 上做到这一点以便更好地理解。 https://bl.ocks.org/mbostock/4061961

出现错误：-

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_d3__.bullet is not a function
    at bullet-chart.component.ts:55
    at Object.<anonymous> (d3.js:11140)
    at Dispatch.call (d3.js:678)
    at XMLHttpRequest.respond (d3.js:11065)
    at XMLHttpRequest.wrapFn [as __zone_symbol___onload] (zone.js:1199)
    at ZoneDelegate.webpackJsonp.510.ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (core.es5.js:4116)
    at ZoneDelegate.webpackJsonp.510.ZoneDelegate.invokeTask (zone.js:397)
    at Zone.webpackJsonp.510.Zone.runTask (zone.js:165)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:460)
defaultErrorLogger @ core.es5.js:1084
ErrorHandler.handleError @ core.es5.js:1144
next @ core.es5.js:4754
schedulerFn @ core.es5.js:3828
SafeSubscriber.__tryOrUnsub @ Subscriber.js:236
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3814
NgZone.triggerError @ core.es5.js:4185
onHandleError @ core.es5.js:4146
webpackJsonp.510.ZoneDelegate.handleError @ zone.js:369
webpackJsonp.510.Zone.runTask @ zone.js:168
ZoneTask.invoke @ zone.js:460

子弹图.component.html

<p>{{titlee}}</p>
<p>{{subtitle}}</p>

<button>Update</button>
<svg width="980" height="500"></svg>

子弹图.component.ts

import { Component, OnInit,ElementRef, AfterViewInit } from '@angular/core';
import * as d3 from "d3";
@Component({
  selector: 'app-bullet-chart',
  templateUrl: './bullet-chart.component.html',
  styleUrls: ['./bullet-chart.component.css']
})

export class BulletChartComponent implements  AfterViewInit {
    d3: any;
    data: any;
   title: string = 'd3.js with Angular 2!';
  subtitle: string = 'Bullet Chart';
   private chart: any;
private margin:any;
private svg:any;
private height:any;
private width:any;
private title:any;
private bullet:any;
  constructor() { }
ngAfterViewInit(): void {
    this.createBulletChart();
}

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

console.log("createBulletChart() entered");
d3.json("assets/bulletdata.json", function(error, data) {
  if (error) throw error;

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

this.svg = d3.select("svg")
      .data(data)
    // .enter().append("svg")
      .attr("class", "bullet")
      // .attr("width", width + margin.left + margin.right)
      // .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")")
      .call(this.chart);

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

  title.append("text")
      .attr("class", "title")
      .text(function(d) { return d.title; });

  title.append("text")
      .attr("class", "subtitle")
      .attr("dy", "1em")
      .text(function(d) { return d.subtitle; });

  d3.selectAll("button").on("click", function() {
    this.svg.datum(randomize).call(this.chart.duration(1000)); // TODO automatic transition
  });
});

function randomize(d) {
  if (!d.randomizer) d.randomizer = 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;
}

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

}

子弹数据.json

 [
      {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220,270],"markers":[250]},
      {"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21,23],"markers":[26]},
      {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100,320],"markers":[550]},
      {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
      {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
    ]