我正在关注this example 3这取决于 gantt-chart lib ，但显然它与版本 d3v4 不兼容，并且轴有错误。所以我找到了这个ported to d3v4并手动将js下载到我的项目中。轴现在可以工作，但按钮不再正常工作。
我很想研究这个伟大的甘特图库的文档，但我找不到与 d3v4 兼容的官方甘特图。
除此之外，我找不到更多有关它的更新:
Will paste the codepen in comment
非常感谢任何帮助，因为我对这个库的信息很少。
最佳答案
D3 目前为版本 7。我建议您使用更多最新工具，而不是将版本 3 代码更新到版本 4。 D3 的创建者和维护者创建了 Observable Plot，这使得生成甘特图变得非常容易:
该图像是使用以下 Observable 笔记本生成的:
https://observablehq.com/d/c0b0c36900635680
或者，您可以在网页中用 vanilla JS 生成它:
function make_gantt_chart(task_data) {
let p = Plot.plot({
width: 900,
height: 500,
y: { domain: ["D Job", "P Job", "E Job", "A Job", "N Job"] },
marks: [
Plot.barX(task_data, {
x1: "startDate",
x2: "endDate",
y: "taskName",
rx: 5,
fill: function (d) {
if (d.status == "RUNNING") {
return "#669900";
} else if (d.status == "FAILED") {
return "#CC0000";
} else if (d.status == "KILLED") {
return "#ffbb33";
} else if (d.status == "SUCCEEDED") {
return "#33b5e5";
} else {
return "#33b5e5";
}
}
}),
Plot.ruleY(["N Job"]),
Plot.ruleX([d3.min(tasks.map((t) => t.startDate))])
]
});
d3.select(p)
.select('g[aria-label="rule"]')
.attr("transform", `translate(0,${p.scale("y").bandwidth})`);
d3.select('#container').append(() => p)
}
let 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"
},
{
startDate: new Date("Sun Dec 09 04:56:32 EST 2012"),
endDate: new Date("Sun Dec 09 06:35:47 EST 2012"),
taskName: "A Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 06:29:53 EST 2012"),
endDate: new Date("Sun Dec 09 06:34:04 EST 2012"),
taskName: "D Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 05:35:21 EST 2012"),
endDate: new Date("Sun Dec 09 06:21:22 EST 2012"),
taskName: "P Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 05:00:06 EST 2012"),
endDate: new Date("Sun Dec 09 05:05:07 EST 2012"),
taskName: "D Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 03:46:59 EST 2012"),
endDate: new Date("Sun Dec 09 04:54:19 EST 2012"),
taskName: "P Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 04:02:45 EST 2012"),
endDate: new Date("Sun Dec 09 04:48:56 EST 2012"),
taskName: "N Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 03:27:35 EST 2012"),
endDate: new Date("Sun Dec 09 03:58:43 EST 2012"),
taskName: "E Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 01:40:11 EST 2012"),
endDate: new Date("Sun Dec 09 03:26:35 EST 2012"),
taskName: "A Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 03:00:03 EST 2012"),
endDate: new Date("Sun Dec 09 03:09:51 EST 2012"),
taskName: "D Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 01:21:00 EST 2012"),
endDate: new Date("Sun Dec 09 02:51:42 EST 2012"),
taskName: "P Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 01:08:42 EST 2012"),
endDate: new Date("Sun Dec 09 01:33:42 EST 2012"),
taskName: "N Job",
status: "FAILED"
},
{
startDate: new Date("Sun Dec 09 00:27:15 EST 2012"),
endDate: new Date("Sun Dec 09 00:54:56 EST 2012"),
taskName: "E Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 00:29:48 EST 2012"),
endDate: new Date("Sun Dec 09 00:44:50 EST 2012"),
taskName: "D Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 07:39:21 EST 2012"),
endDate: new Date("Sun Dec 09 07:43:22 EST 2012"),
taskName: "P Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 07:00:06 EST 2012"),
endDate: new Date("Sun Dec 09 07:05:07 EST 2012"),
taskName: "D Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 08:46:59 EST 2012"),
endDate: new Date("Sun Dec 09 09:54:19 EST 2012"),
taskName: "P Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 09:02:45 EST 2012"),
endDate: new Date("Sun Dec 09 09:48:56 EST 2012"),
taskName: "N Job",
status: "RUNNING"
},
{
startDate: new Date("Sun Dec 09 08:27:35 EST 2012"),
endDate: new Date("Sun Dec 09 08:58:43 EST 2012"),
taskName: "E Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 08:40:11 EST 2012"),
endDate: new Date("Sun Dec 09 08:46:35 EST 2012"),
taskName: "A Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 08:00:03 EST 2012"),
endDate: new Date("Sun Dec 09 08:09:51 EST 2012"),
taskName: "D Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 10:21:00 EST 2012"),
endDate: new Date("Sun Dec 09 10:51:42 EST 2012"),
taskName: "P Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sun Dec 09 11:08:42 EST 2012"),
endDate: new Date("Sun Dec 09 11:33:42 EST 2012"),
taskName: "N Job",
status: "FAILED"
},
{
startDate: new Date("Sun Dec 09 12:27:15 EST 2012"),
endDate: new Date("Sun Dec 09 12:54:56 EST 2012"),
taskName: "E Job",
status: "SUCCEEDED"
},
{
startDate: new Date("Sat Dec 08 23:12:24 EST 2012"),
endDate: new Date("Sun Dec 09 00:26:13 EST 2012"),
taskName: "A Job",
status: "KILLED"
}
];
make_gantt_chart(tasks)<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/@observablehq/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57273b382317677961" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<div id="container"></div>关于d3.js - D3js 甘特图兼容 D3.4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74553399/