希望在 Angular 6 中实施时间线包

Question

在我的 Angular 6 项目中使用 npm install，我安装了这个包：https://www.npmjs.com/package/d3-timelines

问题是我不明白如何将它导入我的 Angular 组件。

我们已经有其他 d3 导入，所以我只是尝试使用这个特定的包。

这是我们拥有的：

import { Component, ViewEncapsulation, OnInit, AfterViewInit } from '@angular/core';

import * as d3 from 'd3-selection';
import * as d3Scale from 'd3-scale';
import * as d3Shape from 'd3-shape';
import * as d3Array from 'd3-array';
import * as d3Axis from 'd3-axis';
import * as d3TimeFormat from 'd3-time-format';
import * as d3Timeline from 'd3-timelines';
import { ViewChild } from '@angular/core';


@Component({
    selector: 'app-timeline',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './timeline.component.html',
    styleUrls: ['./timeline.component.scss']
})
export class TimelineComponent implements AfterViewInit {

    title = 'Time Line';
    
    ngAfterViewInit() {    
       this.timelineCircle();
    }
    
      timelineCircle() {
        let width = 500; 
        var testData = [
            {times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
            {times: [{"starting_time": 1355759910000, "ending_time": 1355761900000}, ]},
            {times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
          ];
          var chart = d3Timeline.timeline();
      }

}

我得到的浏览器错误是：

 ERROR TypeError: d3_timelines__WEBPACK_IMPORTED_MODULE_6__.timeline is not a function

我只是不确定导入这个包并在我的组件中使用它的正确方法。

不胜感激...

Answer 1

您要查找的函数似乎是 d3Timeline.timelines()（复数）。您提供的代码片段是 timeline() 单数。

我还建议在您的模块导入中匹配复数：

import * as d3Timelines from 'd3-timelines';
...
var chart = d3Timelines.timelines()

我从包的示例文件夹中获取了函数的名称：请参阅 https://github.com/denisemauldin/d3-timeline/blob/master/examples/example.html

中的第 102 行（以及其他）

希望在 Angular 6 中实施时间线包

Looking to implement a timeline package in Angular 6

angular

d3.js

timeline