希望在 Angular 6 中实现时间线包答案

【问题标题】：Looking to implement a timeline package in Angular 6希望在 Angular 6 中实现时间线包
【发布时间】：2019-02-16 09:37:04
【问题描述】：

在我的 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

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

不胜感激...

【问题讨论】：

在不知道您使用的时间线包的情况下，您收到的错误很清楚，来自 d3Timeline 的属性时间线不是函数。首先尝试记录模块以查看可用的内容。 console.log(d3Timeline) 在你的 timelineCircle() 方法中
好的，我会登录的。但是，我假设他们的 timeline() 函数将通过我的 var 声明 import * as d3Timeline from 'd3-timelines'; 公开。

标签： angular d3.js timeline

【解决方案1】：

看起来您要查找的函数是d3Timeline.timelines()（复数）。您提供的代码 sn-p 是timeline() 单数。

我还建议在您的模块导入中匹配多个：

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

我从包的示例文件夹中获得了函数的名称：参见https://github.com/denisemauldin/d3-timeline/blob/master/examples/example.html 中的第 102 行（以及其他）

【讨论】：

我也刚刚注意到他们将第 899 行的 timelines var 导出为 exports.timelines = timelines;