Zoomable circle packing old version

Question

I have a zoomable circle packing with version 4 of d3.js except that I would definitely need this code in version 7. Anyone have any ideas what the problems are in my code? Because at the moment it doesn't show anything.

<svg width="900" height="900" class="organigramme"\>\</svg\>

var svg = d3.select(".organigramme")

margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 +    ")");

var color = d3.scaleLinear()
 .range(\["transparent", "white"\])
 .interpolate(d3.interpolateHcl);

var pack = d3.pack()
.size(\[diameter - margin, diameter - margin\])
.padding(2);

d3.json("https://raw.githubusercontent.com/Niiitraam/json2/main/test.json", function(error,    root) {

if (error) throw error;

root = d3.hierarchy(root)
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.value - a.value; });

var focus = root,
    nodes = pack(root).descendants(),
    view;

var circle = g.selectAll("circle")
  .data(nodes)
  .enter().append("circle")
    .attr("class", function(d) { return d.parent ? d.children ? "node" : "node-1" : "node-2"; })
    .style("fill", function(d) { return d.children ? color(d.depth) : null; })
    .on("click", function(d) {
      if (d3.event.altKey) {
        zoomTo(\[root.x, root.y, root.r \* 2 + margin\]);
      } else {
        zoom(d);
      }
      d3.event.stopPropagation();
    });
    

var text = g.selectAll("text")
  .data(nodes)
  .enter().append("text")
    .attr("class", "label")
    .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
    .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
    .style('font-size', 'clamp(1rem, 1.333vw, 1.5rem)')
    .text(function(d) { return d.data.name; })

    
var node = g.selectAll("circle,text");

svg
    .style("background", color(-5))
    .on("click", function() { zoom(root); });

zoomTo(\[root.x, root.y, root.r \* 2 + margin\]);

function zoom(d) {
  var focus0 = focus; focus = d;

  var transition = d3.transition()
      .duration(d3.event.altKey ? 7500 : 750)
      .tween("zoom", function(d) {
        var i = d3.interpolateZoom(view, \[focus.x, focus.y, focus.r \* 2 + margin\]);
        return function(t) { zoomTo(i(t)); };
      });

  transition.selectAll("text")
    .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
      .on("start", function(d) { if (d.parent !== focus) this.style.display = "inline"; })
      .on("end", function(d) { if (d.parent === focus) this.style.display = "none"; })
    .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
      .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
      .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
      .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; })
}

var node1Elements = d3.selectAll(".node-1");
console.log(node1Elements)

node1Elements.on("click", function(d) {
  if (d3.event.altKey) {
    zoomTo(\[root.x, root.y, root.r \* 2 + margin\]);
    g.selectAll("text")
      .data(nodes)
      .enter("text")
      .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
  } else {
    zoom(d);
 }
  d3.event.stopPropagation();

});

function zoomTo(v) {
  var k = diameter / v\[2\]; view = v;

  node.attr("transform", function(d) {
    return "translate(" + (d.x - v\[0\]) \* k + "," + (d.y - v\[1\]) \* k + ")";
  });
  circle.attr("r", function(d) { return d.r \* k; });
}

});

I've been stuck on this problem for 2 weeks now...
If possible I would like someone to help me.