Working with angular-cli

[AlexanderBielen]

Hello,

I have a question, did anyone get this working with angular-cli yet? I cannot seem to import timelines into my component. I import d3 as usual import * as d3 from 'd3'; but no matter how I import or declare timelines, d3.timeline will always be undefined or this error is thrown: Property 'timeline' does not exist on type 'typeof "~/node_modules/'@'types/d3/index"'.

I found similar problems for other plugins but none with a solution (like: https://github.com/Caged/d3-tip/issues/181). Is there anyone that can help me out?

Thanks! Alexander

[denisemauldin]

I install via package.json with "d3-timelines": "^1.3.0". I import it into my angular 2 component currently with const timelines = require("d3-timelines").timelines; to avoid the typescript errors (because I haven't added a type definition file).

[RBroden]

I installed via package manager and then made a test component, like this:

import { Component, OnInit } from '@angular/core';
import * as d3timelines from 'd3-timelines';
import * as d3 from 'd3';

@Component({
    selector: 'ls-timeline',
    template: `
        Timeline
        <div id="timeline1"></div>
    `,
})
export class TimelineComponent implements OnInit {
    private data: any = [
        {label: 'person a', times: [
            {starting_time: 1355752800000, ending_time: 1355759900000},
            {starting_time: 1355767900000, ending_time: 1355774400000}]},
        {label: 'person b', times: [
            {starting_time: 1355759910000, ending_time: 1355761900000}]},
        {label: 'person c', times: [
            {starting_time: 1355761910000, ending_time: 1355763910000}]},
        ];

    private chart: any;

    public ngOnInit() {
        this.chart = d3timelines.timelines();

        d3.select('#timeline1').append('svg').attr('width', 500)
        .datum(this.data).call(this.chart);
    }
}

Granted this didn't get me the result I wanted. Looks kind of funny, but it works. I'm trying to figure out how to use this for my work. Result:

I was trying to recreate the first example from the NPM page:

Kinda close.