Reactjs 有没有在react.js中使用d3.js和d3.js或react.js方法的甘特图示例？

我想在react.js应用程序中使用d3.js构建甘特图。但两者都操纵DOM。所以，有三种方法可以做到这一点。我想采用第一种方法，即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;

import React，{Component}来自'React'；
从“d3”导入*作为d3；
让任务=[
{“startDate”：新日期（“2012年12月9日01:36:45东部标准时间”），“endDate”：新日期（“2012年12月9日02:36:45东部标准时间”），“taskName”：“E作业”，“状态”：“正在运行”}，
{“startDate”：新日期（“2012年12月9日美国东部时间04:56:32”），“endDate”：新日期（“2012年12月9日美国东部时间06:35:47”），“taskName”：“作业”，“状态”：“正在运行”}，
{“startDate”：新日期（“2012年12月9日星期日06:29:53东部标准”），“endDate”：新日期（“2012年12月9日星期日06:34:04东部标准”），“taskName”：“D作业”，“状态”：“正在运行”}，
{“startDate”：新日期（“2012年12月9日美国东部时间05:35:21”），“endDate”：新日期（“2012年12月9日美国东部时间06:21:22”），“taskName”：“P作业”，“状态”：“正在运行”}，
{“startDate”：新日期（“2012年东部时间12月9日05:00:06”），“endDate”：新日期（“2012年东部时间12月9日05:05:07”），“taskName”：“D作业”，“状态”：“正在运行”}，
{“startDate”：新日期（“2012年12月9日03:46:59东部标准时间”），“endDate”：新日期（“2012年12月9日04:54:19东部标准时间”），“taskName”：“P作业”，“状态”：“正在运行”}，
{“startDate”：新日期（“2012年12月9日04:02:45东部标准时间”），“endDate”：新日期（“2012年12月9日04:48:56东部标准时间”），“taskName”：“N作业”，“状态”：“正在运行”}，
{“startDate”：新日期（“2012年12月9日03:27:35东部标准时间”），“endDate”：新日期（“2012年12月9日03:58:43东部标准时间”），“taskName”：“E作业”，“状态”：“成功”}，
{“startDate”：新日期（“2012年12月9日美国东部时间01:40:11”），“endDate”：新日期（“2012年12月9日美国东部时间03:26:35”），“taskName”：“作业”，“状态”：“成功”}
];
让任务状态={
“成功”：“条”，
“失败”：“bar失败”，
“运行”：“酒吧运行”，
“被杀”：“酒吧被杀”
};
让taskNames=[“D Job”、“P Job”、“E Job”、“A Job”、“N Job”]；
类图扩展组件{
建造师（道具）{
超级（道具）；
此.state={
任务：任务，
任务状态：任务状态，
任务名：任务名，
格式：“%H:%M”，
}
}
绘图图=（）=>{
设甘特=d3.gantt（）.taskTypes（this.state.taskNames）.taskStatus（this.state.taskStatus）.tickFormat（this.state.format）；
返回甘特图（this.state.tasks）；
}
render（）{
返回(
{this.drawChart（）}
{/*this.svgE1=e1}>*/}
)
}
}
导出默认图表；

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

d3.gantt（）

是一个名为的外部库，因此除了

d3

库之外，还需要导入它

最后但并非最不重要的一点是，确保安装

d3

version

V3

，例如：

npmid3@3.5.12

因为

d3甘特图

与

v3

版本兼容

一旦安装了

d3

和

d3甘特图

包，图表组件就可以这样实现：

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;

---

供您参考（改编自）

d3。甘特图不在基本
d3
库中。您可能缺少一条导入语句，该语句添加了甘特图功能。可能是，但我尝试了从导入到将d3包降级到版本3 e.t.cI的每一件事。在经过4-5小时的彻底搜索之后，昨天我已经尝试了所有这些场景和导入。但错误仍然是一样的，我本可以在纯d3.js中实现，因为我的目标是使用d3.js构建甘特图，但我不想编写数百行代码。事实上，d3.js中没有很好的甘特图示例，它可以很容易地集成到react中。但是，是的，我学习了一点d3.js，最后我选择了react google charts和reat gantt timeline，这两个都是优秀的npm软件包，因为它们提供了交互回调。@DeepankarSingh，我同意，但你看到了演示如何将gantt Chart集成到react应用程序中的示例吗？我只尝试了这个示例，但是没有尝试这个窗口。d3=d3；语法。现在，在前面的控制台中没有错误，因为d3.gantt（）不是一个函数。但什么都没有呈现。