Adding Graphics to a React App with D3 — Find Elements and Paths

D3 lets us add graphics to a front-end web app easily.

Vue is a popular front end web framework.

They work great together. In this article, we’ll look at how to add graphics to a Vue app with D3.

Find Elements in Selections

We can get elements with the given select with D3 in our React app.

To do this, we write:

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

export default function App() {
  useEffect(() => {
    let selection = d3.selectAll("b").filter(":nth-child(odd)").nodes();
    selection.forEach((e) => {
      console.log(e.textContent);
    });
  }, []);

  return (
    <div className="App">
      <div>
        <b>apple</b>
        <b>orange</b>
        <b>grape</b>
      </div>
    </div>
  );
}

We get all the b elements from the DOM that have even indexes with the select and filter methods.

filter lets us return the elements we want.

Then we call forEach to log the textContent of each element retrieved.

Also, we can use the d3.matcher method.

For example, we can write:

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

export default function App() {
  useEffect(() => {
    const heading = d3.selectAll("h5");
    const matcher = heading.filter(d3.matcher("h5")).node();
    const filter = heading.filter(d3.matcher("h5")).node();
    console.log(matcher);
    console.log(filter);
  }, []);

  return (
    <div className="App">
      <div>
        <h5>This is text1</h5>
        <h5>This is text2</h5>
        <h5>This is text3</h5>
        <h5>This is text4</h5>
      </div>
    </div>
  );
}

We call d3.selectAll to select all the h5 elements.

Also, we can call the d3.creator method to create an element.

Then we can use append to append it to another element:

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

export default function App() {
  useEffect(() => {
    const selection = d3.select("body");
    selection.append(d3.creator("div"));
    const div = document.querySelector("div");
    div.innerText = "hello world.";
  }, []);

  return <div className="App"></div>;
}

We get the body with d3.select .

Then we create our div by calling d3.creator with the tag name of the element we want to create.

Then we can call querySelector to get it and set the text to what we want.

Paths

We can use the d3.line method to draw lines.

For example, we can write:

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

export default function App() {
  useEffect(() => {
    const data = [
      [0, 12],
      [50, 20],
      [100, 30],
      [200, 40],
      [300, 90]
    ];
    const lineGenerator = d3.line();
    const pathString = lineGenerator(data);
    d3.select("path").attr("d", pathString);
  }, []);

  return (
    <div className="App">
      <style>{`
        path {
          fill: blue;
          stroke: #aaa;
        }
      `}</style>
      <svg width="600" height="100">
        <path transform="translate(20, 0)" />
      </svg>
    </div>
  );
}

We have a nested array with the x and y coordinates of the points for our path.

Then we call the lineGenerator function that we created from the d3.line method to create the line.

We select the path element and then pass in our generated pathString into it.

Conclusion

We can find elements and work with them in our React app with D3.