任何使用 d3.js 在 react.js 中使用 d3.js 或 react.js 方法的甘特图示例？

Question

我想在我的 react.js 应用程序中使用 d3.js 构建甘特图。但两者都操纵 DOM。所以，https://frontendcharts.com/react-d3-integrate/ 有 3 种方法可以解决这个问题。我想采用第一种方法，即 D3 方法。如果我能实现一个基本示例，我将不胜感激，因为我必须向我的前辈展示它。

我尝试了下面的代码，但它给出了错误“甘特”没有从“d3”导出（导入为“d3”）。还有一件事是如何将这个甘特图添加到 SVG 中。

import React, { Component } from 'react';
import * as d3 from 'd3';


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

let taskStatus = {
    "SUCCEEDED" : "bar",
    "FAILED" : "bar-failed",
    "RUNNING" : "bar-running",
    "KILLED" : "bar-killed"
};

let taskNames = [ "D Job", "P Job", "E Job", "A Job", "N Job" ];

class Chart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tasks: tasks,
            taskStatus: taskStatus,
            taskNames: taskNames,
            format: "%H:%M",
        }
    }

    drawChart = () => {
        let gantt = d3.gantt().taskTypes(this.state.taskNames).taskStatus(this.state.taskStatus).tickFormat(this.state.format);
        return gantt(this.state.tasks);
    }

    render() {
        return (
            <div>
                {this.drawChart()}
                {/* <svg width={this.props.width} height={this.props.height} ref={e1 => this.svgE1 = e1}></svg> */}
            </div>
        )
    }
}

export default Chart;

我只想要一个在 react.js 中使用 d3.js 的甘特图基本示例

Answer 1

显然d3.gantt() 是一个名为Gantt-Chart 的外部库，因此除了d3 库之外，它还需要导入。

最后但同样重要的是，确保安装d3 版本V3，例如：npm i d3@3.5.12，因为d3-gantt-chart 与v3 版本兼容。

一旦安装了d3 和d3-gantt-chart 包，图表组件可以这样实现：

import React, { Component } from "react";
import * as d3 from "d3";
import "d3-gantt-chart";

class GanttChart extends Component {

  componentDidMount() {
    this.drawChart();
  }

  drawChart() {
    const { tasks, taskTypes, taskStatus, tickFormat } = this.props;
    var gantt = window.d3
      .gantt()
      .taskTypes(taskTypes)
      .taskStatus(taskStatus)
      .tickFormat(tickFormat);
    gantt(tasks);
  }

  render() {
    return null;
  }
}

export default GanttChart;

Here is a demo供您参考（改编自this original example）