D3.js graph not moving with simulation variable triggering it

So I am using react and D3 together, and I can get a graph to appear with my data, however when I apply the tick, however the graph displayed is static and cannot be interacted with

Here is my file:


import * as d3 from "d3"
import { forceSimulation } from "d3";
import { useEffect, useRef } from 'react';

function Graph(props) {
    const svgRef = useRef(null);

        () => {
            if(svgRef.current) {// Check that svg element has been rendered
                let svg = d3.select(svgRef.current)
                let width = svg.attr("width")
                let height = svg.attr("height")
                let data = {

                        {source:"Max", target:"George"},
                        {source:"George", target:"Jesus"},
                        {source:"Jesus", target:"Max"},
                        {source:"Jesus", target:"Ben"},
                        {source:"James", target:"Ben"}

                let simulation = d3
                            return d.name
                    .force("charge", d3.forceManyBody().strength(-30))
                    .force("center", d3.forceCenter(width / 2, height / 2))
                    .on("tick", ticked)

                let edge = svg
                    .attr("stroke-width", function(d) {
                        return 3;
                    .style("stroke", "black")

                let node = svg
                    .attr("r", 5)
                    .attr("fill", function(d) {
                        return "grey";
                    .attr("stroke", "black")

                function ticked() {
                    .attr("x1", function(d) {
                        return d.source.x;
                    .attr("y1", function(d) {
                        return d.source.y
                    .attr("x2", function(d) {
                        return d.target.x;
                    .attr("y2", function(d) {
                        return d.target.y;

                    .attr("cx", function(d) {
                        return d.x;
                    .attr("cy", function(d) {
                        return d.y;

    return (
            <svg ref={svgRef} id="svgID" width="640" height="480"></svg>

export default Graph

I think it is to do with the fact that the simulation variable is never being used, however the ticked variable is being used I think?

I tried to .call(simulation) and .call(force.drag) but neither of these worked.

Any ideas?

Source: JavaSript – Stack Overflow

November 22, 2021
Category : News
Tags: D3.js | javascript | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.