Хотите реализовать пакет временной шкалы в Angular 6 - PullRequest
Новая
       35

Хотите реализовать пакет временной шкалы в Angular 6

0 голосов
/ 11 сентября 2018

Используя npm install в моем проекте Angular 6, я установил этот пакет: https://www.npmjs.com/package/d3-timelines

Проблема в том, что я не понимаю, как импортировать его в мой угловой компонент.

У нас уже есть другие 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

Я просто не уверен, как правильно импортировать этот пакет и использовать его в моем компоненте.

Совет ценится ...

1 Ответ

0 голосов
/ 11 сентября 2018

Похоже, что функция, которую вы ищете, это d3Timeline.timelines() (множественное число).Предоставленный фрагмент кода является timeline () в единственном числе.

Я бы также рекомендовал сопоставить множественное число при импорте вашего модуля: 

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

Я получил имя функции из папки примеров пакета:см. строку 102 (среди прочих) в https://github.com/denisemauldin/d3-timeline/blob/master/examples/example.html

...