Hi, and welcome to my first ever blog post. As the title suggests, we’ll be building a force graph to navigate through a website built with Next.js. By using a force graph for navigation, we create a distinctive and visually appealing method for users to interact with a website. Furthermore, it can aide users in comprehending the relationships between different pages. Each node represents the pages of a website, allowing users to interact with the nodes corresponding to distinct pages. As you’ve probably noticed, this is the same UI used on this website. ## Technologies ### Next.js For this tutorial we’re using the App Router. Adapting the code for Pages Router should be straightforward since we're only working with Client Components. Familiarity with the [useEffect](https://react.dev/reference/react/useEffect), and [usePathname](https://nextjs.org/docs/app/api-reference/functions/use-pathname) hooks are essential. ### D3.js A basic understanding of D3.js for selecting React-rendered elements and data binding is required. If you're new, check out the [D3.js documentation](https://d3js.org/what-is-d3) and [React and D3 by Amelia Wattenberger](https://2019.wattenberger.com/blog/react-and-d3). Also, here's a [D3-force example](https://observablehq.com/@d3/disjoint-force-directed-graph/2). Finally here’s a [repository](https://github.com/AdrianTejada/force-graph-routing-nextjs) to code alongside with, along with a [live demo.](https://force-graph-routing-nextjs.vercel.app/). Happy coding! ## Step 1: Project Setup Clone the repository and checkout to the `tutorial-start` branch. After installing dependencies with `npm i`, run `npm run dev` to run a development server locally. Open `/src/app/_components/ForceGraph.js`. You'll see that we have a starting point for our component. ```jsx:ForceGraph.js "use client"; import { useRouter } from "next/navigation"; export default function ForceGraph({ width = 250, height = 250 }) { const router = useRouter(); const handleRoute = (node) => { router.push(node.route); }; return ( ); } ``` ### Writing the Data In order for D3-force to create the force graph, we need to give it the right shape of data. D3-force requires an array of nodes. It also requires an array of links, which describe the relationship between the nodes. ### Nodes In our case, the nodes will represent the pages on our application. Each node is an object with an `id` and `route` properties. You’ll notice that we already have the nodes data hard coded in `/src/data/nodes.json`, as, our navbar makes use of that data. ```javascript const nodes = [ { id: "home", route: "/", }, { id: "work", route: "/work", }, { id: "blog", route: "/blog", }, // additional nodes... ]; ``` ### Links Links describe relationships between nodes, which are defined by `source` and `target` properties. It's important that the values inside our `source` and `target` properties coincide with existing id's in the nodes. This is necessary for D3-force to create the force graph. ```javascript const links = [ { // node with id of home links to node with id of work source: "home", target: "work", }, { // node with id of home links to node with id of blog source: "home", target: "blog", }, // additional links... ]; ``` Now that we understand the data, let’s hard code the links. Go to `/src/data` and create `links.json.` Next, copy and past the following the data into the file. You’ll notice that we’ve added a property called `id`. This will be passed into the key prop when we render the links with React. ```json:links.json [ { "source": "home", "target": "work", "id": 0 }, { "source": "home", "target": "blog", "id": 1 }, { "source": "home", "target": "info", "id": 2 }, { "source": "home", "target": "contact", "id": 3 } ] ``` As mentioned earlier, we already have the nodes data as it’s being used in our navbar. This structured data is crucial for D3-force to generate the force graph accurately. Now that we have the data, we can leverage React to render it. ## Step 2: Render the Data with React For our purposes, we'll leverage React to render the nodes, links, and labels. After they're rendered, we'll use D3.js to style them. Create Client Components for rendering the nodes `(Circles.js)`, links `(Lines.js)`, and labels `(Labels.js)`. ```jsx:Circles.js "use client"; export default function Circles({ nodes, handleRoute }) { return nodes.map((node) => ( handleRoute(node)} /> )); } ``` The `handleRoute` prop that allows us to route to the page represented by the node when it is clicked on. ```jsx:Lines.js "use client"; export default function Lines({ links }) { return links.map((link) => ); } ``` ```jsx:Labels.js "use client"; export default function Labels({ nodes }) { return nodes.map((node) => ( {node.id} )); } ``` Render these components in the `

atejada.dev

Categories

tech stack

Details