D3: Implementing code in a dynamic way

Hello dear community,

I am a beginner with d3 and still not very familar with d3. I have implemented a graph which consists out of nodes. If the leaf nodes get clicked, such as “rearrange” node, the rearrange node should become the center node with new nodes (which are translations and synonyms). Right now, there is the approach to declare datasets for every leaf node and when it gets clicked the graph should be rendered. As an example I have tried this approach with the dataset for the “rearrange node”. Is there a more dynamic way? Because otherwise it seems like a too hardcoded approach.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Meanings & Synonyms</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
        .link line {
            stroke: #696969;
        }

        .link line.separator {
            stroke: #fff;
            stroke-width: 2px;
        }

        .node circle {
            stroke: #000;
            stroke-width: 1.5px;
        }

        .node text {
            font: 10px sans-serif;
            pointer-events: none;
        }
    </style>
</head>
<body>

<script>
    var width = 800, height = 750;

    const colors = d3.scaleOrdinal(d3.schemeDark2);

    var svgContainer = d3.select("body").append("svg")
                    .attr("width",width)
                    .attr("height",height);

    var t = d3.transition().duration(750)
            .ease(d3.easeLinear);

    var graphNodes = [
        {"word":"retool", "category":1, "percentage":20},
        {"word":"기계를 바꾸다","category":2,"percentage":55},
        {"word":"재정비하다", "category":3,"percentage":20},
        {"word":"개편하다", "category":4,"percentage":15},
        {"word":"change", "category":2,"percentage":0},
        {"word":"turn", "category":2,"percentage":0},
        {"word":"switch", "category":2,"percentage":0},
        {"word":"transform", "category":2,"percentage":0},
        {"word":"shift", "category":2,"percentage":0},
        {"word":"repair", "category":3,"percentage":0},
        {"word":"maintain", "category":3,"percentage":0},
        {"word":"rearrange", "category":4,"percentage":0},
        {"word":"reshuffle", "category":4,"percentage":0},
        {"word":"revise", "category":4,"percentage":0},
        {"word":"reorganize", "category":4,"percentage":0}
    ];

    var graphLinks =[
        {source:0,target:1, distance:90},
        {source:0,target:2,distance:90},
        {source:0,target:3,distance:90},
        {source:4,target:1,distance:90},
        {source:5,target:1,distance:90},
        {source:6,target:1,distance:90},
        {source:7,target:1,distance:90},
        {source:8,target:1,distance:90},
        {source:2,target:9,distance:37},
        {source:2,target:10,distance:37},
        {source:3,target:11,distance:30},
        {source:3,target:12,distance:30},
        {source:3,target:13,distance:30},
        {source:3,target:14,distance:30}
    ];

    var rearrangeNodes =[
        {"word":"rearrange", "category":1,"percentage":35},
        {"word":"재배열하다", "category":2,"percentage":10},
        {"word":"새롭게 배치다", "category":3,"percentage":60},
        {"word":"재조정하다", "category":4,"percentage":40},
        {"word":"회복시키다", "category":5,"percentage":55},

        {"word":"revamp", "category":2,"percentage":0},
        {"word":"reorganize", "category":2,"percentage":0},
        {"word":"reposition", "category":2,"percentage":0},
        {"word":"reconstruct", "category":2,"percentage":0},

        {"word":"customize", "category":3,"percentage":0},
        {"word":"reset", "category":3,"percentage":0},
        {"word":"redistribute", "category":3,"percentage":0},
        {"word":"change", "category":3,"percentage":0},
        {"word":"rework", "category":3,"percentage":0},
        {"word":"recompose", "category":3,"percentage":0},

        {"word":"readjust", "category":4,"percentage":0},
        {"word":"reacclimate", "category":4,"percentage":0},
        {"word":"reconcile", "category":4,"percentage":0},

        {"word":"restore", "category":5,"percentage":0},
        {"word":"recover", "category":5,"percentage":0},
        {"word":"reconstitute", "category":5,"percentage":0},
        {"word":"rebuild", "category":5,"percentage":0}
    ];

    var rearrangeLinks =[
        {source:0,target:1, distance:90},
        {source:0,target:2,distance:90},
        {source:0,target:3,distance:90},
        {source:0,target:4,distance:90},
        {source:1,target:5,distance:90},
        {source:1,target:6,distance:90},
        {source:1,target:7,distance:90},
        {source:1,target:8,distance:90},
        {source:2,target:9,distance:37},
        {source:2,target:10,distance:37},
        {source:2,target:11,distance:30},
        {source:2,target:12,distance:30},
        {source:2,target:13,distance:30},
        {source:2,target:14,distance:30},
        {source:3,target:15,distance:30},
        {source:3,target:16,distance:30},
        {source:3,target:17,distance:30},
        {source:4,target:18,distance:30},
        {source:4,target:19,distance:30},
        {source:4,target:20,distance:30},
        {source:4,target:21,distance:30},

    ];

    var resetNodes = [
        {"word":"reset", "category":1,"percentage":50},
        {"word":"다시 맞추다", "category":2,"percentage":40},
        {"word":"고정시키다", "category":3,"percentage":20},
        {"word":"재설정하다", "category":4,"percentage":30},

        {"word":"tune", "category":2,"percentage":0},
        {"word":"assemble", "category":2,"percentage":0},
        {"word":"put together", "category":2,"percentage":0},
        {"word":"match", "category":2,"percentage":0},

        {"word":"fix", "category":3,"percentage":0},
        {"word":"repair", "category":3,"percentage":0},
        {"word":"set", "category":3,"percentage":0},
        {"word":"mend", "category":3,"percentage":0},

        {"word":"redefine", "category":4,"percentage":0},
        {"word":"re-establish", "category":4,"percentage":0},
        {"word":"install", "category":4,"percentage":0},
    ];

    var resetLinks =[
        {source:0,target:1, distance:90},
        {source:0,target:2,distance:90},
        {source:0,target:3,distance:90},
        {source:1,target:4,distance:90},
        {source:1,target:5,distance:90},
        {source:1,target:6,distance:90},
        {source:1,target:7,distance:90},
        {source:2,target:8,distance:90},
        {source:2,target:9,distance:90},
        {source:2,target:10,distance:90},
        {source:2,target:11,distance:90},
        {source:3,target:12,distance:90},
        {source:3,target:13,distance:90},
        {source:3,target:14,distance:90},
    ];

    var repairNodes =[
        {"word":"repair", "category":1,"percentage":60},
        {"word":"수리하다", "category":2,"percentage":50},
        {"word":"고치다", "category":3,"percentage":40},
        {"word":"바로잡다", "category":4,"percentage":20},

        {"word":"renovate", "category":2,"percentage":0},
        {"word":"overhaul", "category":2,"percentage":0},
        {"word":"remake", "category":2,"percentage":0},
        {"word":"remodel", "category":2,"percentage":0},

        {"word":"correct", "category":3,"percentage":0},
        {"word":"cure", "category":3,"percentage":0},
        {"word":"change", "category":3,"percentage":0},
        {"word":"adjust", "category":3,"percentage":0},

        {"word":"straighten", "category":4,"percentage":0},
        {"word":"rectify", "category":4,"percentage":0},
        {"word":"put right", "category":4,"percentage":0},
    ];

    var repairLinks =[
        {source:0,target:1, distance:90},
        {source:0,target:2,distance:90},
        {source:0,target:3,distance:90},
        {source:1,target:4,distance:90},
        {source:1,target:5,distance:90},
        {source:1,target:6,distance:90},
        {source:1,target:7,distance:90},
        {source:2,target:8,distance:90},
        {source:2,target:9,distance:90},
        {source:2,target:10,distance:90},
        {source:2,target:11,distance:90},
        {source:3,target:12,distance:90},
        {source:3,target:13,distance:90},
        {source:3,target:14,distance:90},
    ];



    var link, node,simulation,labels;
    function renderGraph(nodes, links){
        simulation = d3.forceSimulation()
            .nodes(nodes);


        var link_force = d3.forceLink(links).distance(function(d){
            return d.distance;
        }).strength(1);

        var charge_force = d3.forceManyBody()
            .strength(-100);

        var center_force = d3.forceCenter(width/2,height/2);

        simulation.force("charge_force",charge_force)
            .force("center_force",center_force)
            .force("link",link_force)
            .force("collide",d3.forceCollide(68))
            .on("tick",tick);


        link = svgContainer.selectAll(".link")
            .data(links)
            .enter().append("g")
            .attr("class","link");

        link.transition(t);
        link.append("line")
            .attr("stroke-width",1)
            .style("stroke","black");

        node = svgContainer.selectAll(".node")
            .data(nodes)
            .enter().append("g")
            .attr("class","node");

        node.transition(t);

        node.append("circle")
            .attr("r",35)
            .attr("fill",function(d){
                return colors(d.category);
            });

        node.append("text")
            .attr("dy",".25em")
            .attr("text-anchor","middle")
            .text(function(d){
                return d.word;
            });

        node.on("click",onclick);

        labels = svgContainer.append("g")
                    .attr("class","labels")
                    .selectAll("text")
                    .data(nodes)
                    .enter().append("text")
                    .attr("dx", 45)
                    .attr("dy", ".35em")
                    .style("font-size",17)
                    .style("font-weight", "bold")
                    .attr("fill",function(d){
                        return colors(d.category);
                    })
                    .text(function(d){
                        var percent = 0;
                        if(d.percentage!==0){
                            percent = d.percentage;
                            return percent+"%";
                        }
                    })
    }

    renderGraph(graphNodes,graphLinks);


    function tick(){

            link.selectAll("line")
                .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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

        labels.attr("x", function(d){
            return d.x;
        })
            .attr("y",function(d){
                return d.y;
            })

    }

    function onclick(data){
        node.remove();
        link.remove();
        labels.remove();
        if(data.word==="rearrange") {
            renderGraph(rearrangeNodes,rearrangeLinks);
        }else if(data.word==="reset"){
            renderGraph(resetNodes,resetLinks);
        }else if(data.word==="repair"){
            renderGraph(repairNodes,repairLinks);
        }
    }


</script>
</body>
</html>

Thank you very much. I hope you can help me out.