tapd甘特图

// 示例代码仅为示意，实际应用中需根据具体需求调整
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");

const tasks = [
  { name: "任务A", start: new Date(2023, 0, 1), end: new Date(2023, 0, 10) },
  { name: "任务B", start: new Date(2023, 0, 5), end: new Date(2023, 0, 15) },
  // ...更多任务
];

const x = d3.scaleTime()
  .domain(d3.extent(tasks, d => d.start))
  .range([0, width]);

const y = d3.scaleBand()
  .domain(tasks.map(d => d.name))
  .range([0, height])
  .padding(0.1);

svg.selectAll(".task")
  .data(tasks)
  .enter().append("rect")
    .attr("class", "task")
    .attr("x", d => x(d.start))
    .attr("y", d => y(d.name))
    .attr("width", d => x(d.end) - x(d.start))
    .attr("height", y.bandwidth());