Angular2 및 D3.js Gantt 차트

Question

나는 angular2 차트를 사용하여 d3.js에서 Gantt 차트를 구현하려고합니다. 다음 예제를 사용하려고합니다 http://bl.ocks.org/dk8996/5538271. 분명히 this는 typescript보다는 javascript를 사용합니다. 그러나 나는 그것의 대부분을 좋아 보이고있다, 그러나 나는 1 개의 문제점을 얻는다.

createSchedule() { 
    var tasks = [{"startDate":new Date("Sun Dec 09 01:36:45 EST 2012"),"endDate":new Date("Sun Dec 09 02:36:45 EST 2012"),"taskName":"E Job","status":"RUNNING"}]; 
    var taskStatus = { 
     "SUCCEEDED" : "bar", 
     "FAILED" : "bar-failed", 
     "RUNNING" : "bar-running", 
     "KILLED" : "bar-killed" 
    }; 

    var taskNames = [ "D Job", "P Job", "E Job", "A Job", "N Job" ]; 

    tasks.sort(function(a,b) { 
     return a.endDate.getTime() - b.endDate.getTime(); 
    }); 

    var maxDate = tasks[tasks.length -1].endDate; 
    tasks.sort(function(a,b) { 
     return a.startDate.getTime() - b.startDate.getTime(); 
    }); 
    var minDate = tasks[0].startDate; 

    var format = "%H:%M"; 
    var timeDomainString = "1day"; 

    var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format).height(450).width(800); 
    gantt.timeDomainMode("fixed"); 
    changeTimeDomain(timeDomainString); 

    gantt(tasks); 

    function changeTimeDomain(timeDomainString) { 
     this.timeDomainString = timeDomainString; 
     switch (timeDomainString) { 
     case "1hr": 
     format = "%H:%M:%S"; 
     gantt.timeDomain([ d3.time.hour.offset(new Date(getEndDate()), -1), getEndDate() ]); 
     break; 
     case "3hr": 
     format = "%H:%M"; 
     gantt.timeDomain([ d3.time.hour.offset(new Date(getEndDate()), -3), getEndDate() ]); 
     break; 

     case "6hr": 
     format = "%H:%M"; 
     gantt.timeDomain([ d3.time.hour.offset(new Date(getEndDate()), -6), getEndDate() ]); 
     break; 

     case "1day": 
     format = "%H:%M"; 
     gantt.timeDomain([ d3.time.day.offset(new Date(getEndDate()), -1), getEndDate() ]); 
     break; 

     case "1week": 
     format = "%a %H:%M"; 
     gantt.timeDomain([ d3.time.day.offset(new Date(getEndDate()), -7), getEndDate() ]); 
     break; 
     default: 
     format = "%H:%M" 

     } 
     gantt.tickFormat(format); 
     gantt.redraw(tasks); 
    } 

    function getEndDate() { 
     var lastEndDate = Date.now(); 
     if (tasks.length > 0) { 
      lastEndDate = tasks[tasks.length - 1].endDate.getTime(); 
     } 
     return lastEndDate; 
    } 

} 

내가 오류 비트는 다음과 같습니다 :

이

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format).height(450).width(800); 

그것은

을 다음과 같이 Property 'gantt' does not exist on type 'typeof d3'

내가 내 D3를 가져 말한다 여기

내 전체 방법 import * as d3 from 'd3';

다른 곳에서는 오류가 없으며 문제를 추적하는 데 어려움을 겪고 있습니다.

아이디어가 있으십니까? 만들 수있는 테스트로도 편집

D3는 다음과 같이 내가 간단한 원을 구현 작동하는지 :

이

d3.select("#scheduleDiv").append("svg").attr("width",50).attr("height", 50).append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");

이 잘 작동하지만 .gantt은()

을하지 않습니다

Answer 1

gantt() 메서드가 d3 라이브러리의 일부가 아니기 때문에이 오류가 발생했습니다. 예에서 <script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"> </script‌​>에서 가져 왔습니다.

gantt 라이브러리의 정의 파일을 찾을 수 있으면 추가 할 수 있습니다. 그렇지 않다면 다음과 같은 맞춤 설정을 만들어야합니다.

declare module d3 { 
    export function gantt(input:any, input2:any): any; 

}