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:

Graph.js

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

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

    useEffect(
        () => {
             
            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 = {
                    nodes:[
                        {name:"Max"},
                        {name:"George"},
                        {name:"Jesus"},
                        {name:"Ben"},
                        {name:"James"}
                    ],

                    edges:[
                        {source:"Max", target:"George"},
                        {source:"George", target:"Jesus"},
                        {source:"Jesus", target:"Max"},
                        {source:"Jesus", target:"Ben"},
                        {source:"James", target:"Ben"}
                    ]
                };

                let simulation = d3
                    .forceSimulation(data.nodes)
                    .force(
                        "link",
                        d3.forceLink(data.edges).id(function(d){
                            return d.name
                        })
                    )
                    .force("charge", d3.forceManyBody().strength(-30))
                    .force("center", d3.forceCenter(width / 2, height / 2))
                    .on("tick", ticked)


                let edge = svg
                    .append("g")
                    .selectAll("line")
                    .data(data.edges)
                    .enter()
                    .append("line")
                    .attr("stroke-width", function(d) {
                        return 3;
                    })
                    .style("stroke", "black")

                let node = svg
                    .append("g")
                    .selectAll("circle")
                    .data(data.nodes)
                    .enter()
                    .append("circle")
                    .attr("r", 5)
                    .attr("fill", function(d) {
                        return "grey";
                    })
                    .attr("stroke", "black")

                function ticked() {
                    edge
                    .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;
                    })

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

    },[svgRef.current])
    
    return (
        <div>
            <svg ref={svgRef} id="svgID" width="640" height="480"></svg>
        </div>
    )
  }

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.