d3 tree update root

by colourblue

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://d3js.org/d3.v6.js"></script>
</head>

<body>
    <div id="vis"></div>
    <script>
      let treeData = []
      let currentTreeData = []

      var flatData = [
        { "ID" : 1000, "name" : "The Root", "parentID":null},
        { "ID" : 1100, "name" : "Child 1", "parentID":1000 },
        { "ID" : 1110, "name" : "G.Child 1.1", "parentID":1100 },
        { "ID" : 1120, "name" : "G.Child 1.2", "parentID":1100 },
        { "ID" : 1130, "name" : "G.Child 1.3", "parentID":1100 },
        { "ID" : 1200, "name" : "Child 2", "parentID":1000 },
        { "ID" : 1210, "name" : "G.Child 2.1", "parentID":1200 },
        { "ID" : 1211, "name" : "G.G.Child 2.1.1", "parentID":1210 },
        { "ID" : 1212, "name" : "G.G.Child 2.2.2", "parentID":1210 },
        { "ID" : 12111, "name" : "G.G.G.Child 2.1.1.1", "parentID":1211 },
        { "ID" : 1300, "name" : "Child 3", "parentID":1000 }
      ];

        function chart(thisTreeData) {
          let root = clusterise(thisTreeData)
          // Add nodes (links)
          svg.append("g")
            .attr("class", "node")
            .attr("fill", "none")
            .attr("stroke", "#555")
            .attr("stroke-opacity", 0.3)
            .selectAll("path")
            .data(root.links(), function(d) { return "Link" + ":" + d.target.data.id })
            .join("path")
            .attr("d", d3.linkRadial()
                  .angle(d => d.x)
                  .radius(d => d.y));

          // Add circles
          svg.append("g")
            .attr("class", "node")
            .selectAll("circle")
            .data(root.descendants(), function(d) { return "Circle" + d.data.id; })
            .join("circle")
            .attr("transform", d => `
  rotate(${d.x * 180 / Math.PI - 90})
  translate(${d.y},0)
  `)
            .attr("r", 3)
            .on('click', click);

          // Add...