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:

is OpenNext really the key to Next.js portability

Is OpenNext really the key to Next.js portability?

There’s been major controversy surrounding Next.js’s openness. Discover how OpenNext is addressing the bubbling issue of Next.js portability.

Elijah Asaolu
Apr 30, 2025 ⋅ 5 min read

Solid series: Single Responsibility Principle (SRP)

By using SRP, developers can produce code that is easier to debug, test, and extend, making it clearer, more maintainable, and scalable.

Oyinkansola Awosan
Apr 30, 2025 ⋅ 8 min read
axios post requests

Axios POST requests: Handling errors, authentication, & best practices

Learn about the Axios POST method and discover how to deploy it in vanilla JavaScript and frameworks like React.

Chimezie Innocent
Apr 29, 2025 ⋅ 16 min read
creating server-driven web apps with htmx

Creating server-driven web apps with htmx

Explore htmx, a small browser-oriented JavaScript library aimed at building no-nonsense, server-driven web apps.

Elijah Asaolu
Apr 29, 2025 ⋅ 16 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