2022-12-14
2264
#react
Nosa Obaseki
298
Dec 14, 2022 ⋅ 8 min read

Getting started with D3.js and React

Nosa Obaseki Front-end dev currently building amazing products @theflutterwave 🐼🇳🇬

Recent posts:

tanstack table react table

A complete guide to TanStack Table (formerly React Table)

Discover how to use TanStack Table, formerly known as React Table, to build a table UI for a variety of use cases.

Paramanantham Harrison
Mar 28, 2025 ⋅ 14 min read
javascript object prototypes

JavaScript prototypes: How objects inherit properties and methods

Explore what prototypes are, how the prototype chain works, and how to use the prototype chain to create inheritance between objects.

Ibadehin Mojeed
Mar 28, 2025 ⋅ 7 min read
set up Node.js with TypeScript and Express

How to set up TypeScript with Node.js and Express

Set up TypeScript with Node.js and Express, focusing on configuring key elements for a smooth development experience.

Aman Mittal
Mar 28, 2025 ⋅ 9 min read
featured image tsx extension

What is the difference between a .ts and .tsx file extension?

Examine the differences between the .ts and .tsx file types, their use cases, and best practices for a React TypeScript project.

Hussain Arif
Mar 27, 2025 ⋅ 8 min read
View all posts

11 Replies to "Getting started with D3.js and React"

  1. at “Putting it all together, the BarChart component will be:” ‘h’ and ‘w’ are undefined. I added “const h = 500; const x= 400;” under const data = [12, 5, 6, 6, 9, 10], and it worked. Overall, thanks for the tutorial it really helped guide my d3 work in react app.

  2. This was very hepful. Thanks. But also, it would help if you posted the full working code on github or something. Also, can you explain why you used app.js to call drawChart instead of just rendering everyting in drawChart?

  3. When I hook my app.js to a fetch, the chart doesn’t render. The initial call to componentdidmount for the chart gets no data, but when the data arrives and I set a new state, the new render has no effect on calling drawchart again. How would you recommend getting around this?

  4. // Had to fix a few bugs. One possibility for working code below…

    // App.js:

    import React from ‘react’;
    import BarChart from ‘./BarChart.js’;
    import ‘./App.css’;

    class App extends React.Component {

    state = {
    data: [12, 5, 6, 6, 9, 10],
    width: 700,
    height: 500,
    id: “root”
    }

    render() {
    return (

    );
    }
    }

    export default App;

    // BarChart.js:

    import React from ‘react’;
    import * as d3 from “d3”;

    class BarChart extends React.Component {
    componentDidMount() {
    this.drawChart();
    }

    drawChart() {
    const data = this.props.data;
    const svg = d3.select(“body”).append(“svg”)
    .attr(“width”, this.props.width)
    .attr(“height”, this.props.height);

    const h = this.props.height;

    svg.selectAll(“rect”)
    .data(data)
    .enter()
    .append(“rect”)
    .attr(“x”, (d, i) => i * 70)
    .attr(“y”, (d, i) => h – 10 * d)
    .attr(“width”, 25)
    .attr(“height”, (d, i) => d * 10)
    .attr(“fill”, “green”);

    svg.selectAll(“text”)
    .data(data)
    .enter()
    .append(“text”)
    .text((d) => d)
    .attr(“x”, (d, i) => i * 70)
    .attr(“y”, (d, i) => h – (10 * d) – 3)

    //selection.attr(“property”, (d, i) => {})
    }

    render(){
    return
    }

    }

    export default BarChart;

  5. I can understand the article, but that is because i already know d3 and react. Please look at those suggestions above me and fix this article accordingly, because i think newbies will find this buggy and hard to follow, if just not working overall

  6. As a D3 noob, I appreciate any tutorial, but this article makes giant leaps over huge gaps.
    A. After following the npm steps to install react, d3, and create the basic app scaffolding, there is no Render() method in /src/App.js.
    B. After walking us through creating BarChart.js, the author does not explain how to reference BarChart.js from /src/App.js.

  7. a bit disappointing that you guys are still promoting the old class pattern in this article, don’t think that’s helping anyone at this point in time.

    1. This post was originally published several years ago, and we just updated it a few months back. We’ve added an editor’s note to clarify. Thanks for keeping us honest.

Leave a Reply