angular - Angular2 and D3.js Gantt chart -

i have angular2 app attempting implement gantt chart d3.js into. trying use following example http://bl.ocks.org/dk8996/5538271. uses javascript rather typescript. have got of seeming ok, 1 issue.

here whole method:

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;     }  } 

the bit error is:

var gantt = d3.gantt().tasktypes(tasknames).taskstatus(taskstatus).tickformat(format).height(450).width(800); 

it says property 'gantt' not exist on type 'typeof d3'

i import d3 follows

import * d3 'd3';

i dont have errors anywhere else , struggling track down issue.

any ideas?

edit

also test make sure d3 working implement simple circle follows:

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");

this works fine .gantt() not

you having error because gantt() method not part of d3 library. imported <script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"> </script‌​> in example.

if can find definition file of gantt library can add it. if not, have create custom 1 like:

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