有使用d3.js或react.js方法在react.js中使用d3.js的甘特图的例子吗？

Question

我想在我的react.js应用程序中使用d3.js构建甘特图。但两者都操纵DOM。因此，有3种方法可以让https://frontendcharts.com/react-d3-integrate/实现这一点。我想采用第一种方法，即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)