Angular2 和 D3.js 甘特图答案

【问题标题】：Angular2 and D3.js Gantt chartAngular2 和 D3.js 甘特图
【发布时间】：2016-10-26 10:25:48
【问题描述】：

我有一个 angular2 应用程序，我正在尝试将甘特图从 d3.js 实现到其中。我正在尝试使用以下示例http://bl.ocks.org/dk8996/5538271。显然这使用 javascript 而不是打字稿。不过我觉得大部分看起来都还可以，但我遇到了一个问题。

这是我的整个方法：

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() 不行

【问题讨论】：

gantt() 方法不是 d3 库的一部分。在您的示例中，<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script> 很重要
啊，好吧，我没有意识到这一点。因此，当我在组件 ts 文件中构建图表时，导入该脚本的最佳位置在哪里？
如果您在 index.html 中定义了特定的打字文件和脚本标签，您实际上不需要在任何地方导入它们。
DaRoGa，我正在尝试在我正在构建的 Angular 4 应用程序中实现 d3-gantt-chart，并且正在努力使用我使用 NPM 安装的模块。我可以通过聊天来了解您的解决方案吗？
@TDC 我也有同样的问题，你找到解决办法了吗？

标签： d3.js angular typescript

【解决方案1】：

您遇到该错误是因为 gantt() 方法不是 d3 库的一部分。它是从 <script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"> </script‌> 在您的示例中。

如果你能找到甘特图库的定义文件，你可以添加它。如果没有，您必须创建一个自定义，例如：

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

}

【讨论】：