tags
react d3 typescript graph component-based

fancy-graph

React.js, D3.js, and TypeScript all come together with some pretty obscure NPM packages, fancy 3D, and transition effects, to bring you yet another pluggable spec-based D3.js force-directed grapher.

How to use

See [pages/index.tsx] for an example.

tl;dr (I'm not sure if it actually works yet, though.)

import FancyGraph, { SVG, Graph, Link, Line, Node, Circle } from 'fancy-graph';

const MyComponent = () => {
  //  ...

  return (
    <FancyGraph>
      <SVG centerOrigin>
        <Graph>
          <Link>
            <Line
              // Set link line colour based on data join status
              stroke={{
                enterStroke: 'green',
                updateStroke: 'yellow',
                exitStroke: 'red',
              }}
            />
          </Link>
          <Node>
            <Circle
              // Set node circle hover tooltip based on ID
              title={(d) => d.id}
            />
          </Node>
        </Graph>
      </SVG>
    <FancyGraph>
  );

export default MyComponent;

Contributing

Please fork and send pull requests!

---

Inspired by:

• "Force-directed graph"

• "Creating a Force Graph using React and D3"

• "React/D3 Ecosystem"

• "Understanding React's useEffect callback function"

• "Example: react-d3-force"

---

Authored by Eric Easthope (@ericeasthope), MIT License