I want to build gantt chart using d3.js in my react.js app. But both manipulate DOM. So,there are 3 ways to go with this. I will like to go with first approach i.e D3 approach. It'll be highly appreciated if I get a basic example implemented as I have to showcase it to my senior.

I tried below code but it gives error 'gantt' is not exported from 'd3' (imported as 'd3'). One thing more is that how to add this gantt chart to 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;

I just want a basic example of gantt chart using d3.js in react.js

2

1 Answer

Apparently d3.gantt() is an external library called Gantt-Chart, so in addition to d3 library it needs to be imported as well.

And last but no least, make sure to install d3 version V3, for example: npm i [email protected] since d3-gantt-chart is compatible with v3 version.

Once d3 and d3-gantt-chart packages are installed, the chart component could be implemented like this:

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 for your reference (adapted from this original example)

3

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.