Angular2和D3.js甘特图 [英] Angular2 and D3.js Gantt chart
问题描述
我有一个angular2应用,我正在尝试从d3.js实施甘特图.我正在尝试使用以下示例 http://bl.ocks.org/dk8996/5538271 .显然,这是使用javascript而不是打字稿.但是,我似乎大部分都还可以,但是我遇到了一个问题.
I have an angular2 app which i am attempting to implement a Gantt chart from d3.js into. I am trying to use the following example http://bl.ocks.org/dk8996/5538271. obviously this uses javascript rather than typescript. However i have got most of it seeming ok, but i get one issue.
这是我的全部方法:
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
I import my d3 as follows
import * as d3 from 'd3';
我在其他任何地方都没有任何错误,我正在努力寻找问题所在.
I dont have any errors anywhere else and i am struggling to track down the issue.
有什么想法吗?
编辑
作为确保d3正常运行的测试,我实现了一个简单的圆,如下所示:
Also as a test to make sure d3 is working i implement a simple circle as 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");
这可以正常工作,但.gantt()不能
This works fine but the .gantt() does not
推荐答案
您遇到了该错误,因为gantt()
方法不属于d3库.它是从进口的
在您的示例中为<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js">
</script>
.
You are having that error because gantt()
method is not part of the d3 library. It is imported from
<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js">
</script>
in your example.
如果可以找到甘特库的定义文件,则可以添加它.如果没有,则必须创建一个自定义变量,例如:
If you can find the definition file of the gantt library you can add it. If not, you have to create a custom one like:
declare module d3 {
export function gantt(input:any, input2:any): any;
}
这篇关于Angular2和D3.js甘特图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!