D3.js is among the most popular JavaScript libraries to manipulate graphics on-screen. See what you can do with D3.js v6 in your React apps.

React is the most popular frontend web framework in the world, and D3.js is among the most popular JavaScript libraries to manipulate graphics on-screen.

Version 6 is the latest release of D3.js, and in this article, we’ll look at how to use D3.js v6 in our React apps.

Getting started

First, we’ll create a React project using create-react-app like so:

npx create-react-app d3-app
cd d3-app
npm start

Then we install the D3.js package:

npm i d3

Now we can add D3 to our React app to add some graphics.

Using D3.js v6 with our React apps

We can use D3 in our app by putting the D3 code in the useEffect Hook callback. This is because we’re selecting an element with the DOM and then changing it with D3.

For example, we can write:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    d3.select(".target").style("stroke-width", 5);
  }, []);
  return (
    <div className="App">
      <svg>
        <circle
          class="target"
          style={{ fill: "green" }}
          stroke="black"
          cx={50}
          cy={50}
          r={40}
        ></circle>
      </svg>
    </div>
  );
}

We get the SVG with the target class and then change the stroke-width after selecting it.

We can also put the D3 code in a function and call it when we’d like to use it. For example, we can write:

import React from "react";
import * as d3 from "d3";

export default function App() {
  const changeStroke = () => {
    d3.select(".target").style("stroke-width", 5);
  };

  return (
    <div className="App">
      <button onClick={changeStroke}>change stroke</button>
      <svg>
        <circle
          class="target"
          style={{ fill: "green" }}
          stroke="black"
          cx={50}
          cy={50}
          r={40}
        ></circle>
      </svg>
    </div>
  );
}

We set the D3 code to change the circle’s stroke in the changeStroke function, and we call it on a button click.

We can also add everything into another svg element. For example, we can add three circles by writing the following code:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const svg = d3.select("#area");
    svg
      .append("circle")
      .attr("cx", 50)
      .attr("cy", 50)
      .attr("r", 40)
      .style("fill", "blue");
    svg
      .append("circle")
      .attr("cx", 140)
      .attr("cy", 70)
      .attr("r", 40)
      .style("fill", "red");
    svg
      .append("circle")
      .attr("cx", 300)
      .attr("cy", 100)
      .attr("r", 40)
      .style("fill", "green");
  }, []);

  return (
    <div className="App">
      <svg id="area" height={200} width={450}></svg>
    </div>
  );
}

Let’s break it down:

• The append method with the 'circle' argument adds the circle
• The attr method calls add the attributes for the circle
• cx is the x-coordinate of the circle’s center
• cy is the y-coordinate of the circle’s center
• r is the radius
• style contains the properties and values that we want to put into the circle’s style attribute

Scaling graphics

We can scale graphics with D3.js in our React app by using the scaleLinear method. For example, we can write the following code to add an x-axis to our graph:

import React, { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const margin = { top: 10, right: 40, bottom: 30, left: 30 },
      width = 450 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

    const svg = d3
      .select("#area")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);

    const x = d3.scaleLinear().domain([0, 100]).range([0, width]);
    svg
      .append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x));

    const y = d3.scaleLinear().domain([0, 100]).range([height, 0]);
    svg.append("g").call(d3.axisLeft(y));
  }, []);

  return (
    <div className="App">
      <svg id="area" height={400} width={500}></svg>
    </div>
  );
}

We simply call d3.axisBottom with our x function to add the x-axis. It’ll add the values between the min and max values we passed into the domain function.

Adding a y-axis to our graph

It should go without saying that we can add a y-axis to a graph with D3.

In the code above, you’ll notice we added the margin object to let us set the margins for the graph more easily. Then we append the svh object to the body of the page with the following code:

const svg = d3
  .select("#area")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

We set the width and height and then translate the object into the desired position we want.

Next, we add the x-axis and scale by writing:

const x = d3.scaleLinear().domain([0, 100]).range([0, width]);
svg
  .append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(x));

We call the domain and range as we did before, and we call the d3.axisBottom method to add the x-axis.

Then, to add the y-axis, we write:

const y = d3.scaleLinear().domain([0, 100]).range([height, 0]);
svg.append("g").call(d3.axisLeft(y));

We called domain and range to create the min and max values for the y-axis, then we just call d3.axisLeft to add the y-axis.

#react #d3 #javascript #web-development #developer