d3 = require("d3@7")

graph = {
  const nodes = [
    {id: "Node1"},
    {id: "Node2"},
    {id: "Node3"},
    {id: "Node4"},
    {id: "Node5"},
    {id: "Node6"},
    {id: "Node7"},
    {id: "Node8"},
    {id: "Node9"}
  ];

  const edges = [
    {source: "Node1", target: "Node2", weight: 9},
    {source: "Node1", target: "Node3", weight: 2},
    {source: "Node1", target: "Node4", weight: 2},
    {source: "Node2", target: "Node5", weight: 7},
    {source: "Node2", target: "Node6", weight: 2},
    {source: "Node7", target: "Node8", weight: 4}
  ];

  const width = 800;
  const height = 600;
  const nodeRadius = 30;

  const svg = d3.create("svg")
    .attr("viewBox", `0 0 ${width} ${height}`)
    .attr("preserveAspectRatio", "xMidYMid meet")
    .style("width", "100%")
    .style("height", "100%");

  const simulation = d3.forceSimulation(nodes)
    .alphaDecay(0.02)
    .force("link", d3.forceLink(edges).id(d => d.id).distance(150)) // Increased link distance
    .force("charge", d3.forceManyBody().strength(-300)) // Increased repulsion strength
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("collide", d3.forceCollide().radius(nodeRadius + 10));

  const link = svg.append("g")
    .selectAll("line")
    .data(edges)
    .enter().append("line")
      .attr("stroke", "#999")
      .attr("stroke-width", d => Math.sqrt(d.weight) * 2);

  const node = svg.append("g")
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
      .attr("r", nodeRadius)
      .attr("fill", "#69b3a2")
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  function boundedBox() {
    node
      .attr("cx", d => d.x = Math.max(nodeRadius, Math.min(width - nodeRadius, d.x)))
      .attr("cy", d => d.y = Math.max(nodeRadius, Math.min(height - nodeRadius, d.y)));
  }

  function dragstarted(event, d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(event, d) {
    d.fx = event.x;
    d.fy = event.y;
  }

  function dragended(event, d) {
    if (!event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

  simulation.on("tick", () => {
    link
      .attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);

    boundedBox();
  });

  setInterval(() => {
    simulation.alphaTarget(0.1).restart();
  }, 1000);

  return svg.node();
}