Force-directed graph · lfm-2.5-24b-a2b

We need to build an interactive force-directed graph using D3. Let me break down the requirements:

1. 40 nodes (IDs 0-39), divided into 4 color-coded clusters of 10 each.
2. Within each cluster, connect nodes in a ring (cycle).
3. Connect nodes 0, 10, 20, 30 in a ring to link the clusters.
4. Use a force simulation for positioning.
5. Draw links and label nodes with their IDs.
6. Keep initial graph within view.
7. Drag a node: move it while graph responds; release lets simulation settle.
8. Drag background pans the view.
9. Mouse wheel zooms.
10. Hover highlights the node, its directly connected neighbors, and their links, dimming unrelated elements.
11. Reset view restores initial camera framing without replacing graph data.

I need to write everything to `index.html` in the current working directory. The instructions say "Use the provided `d3.min.js` (global `d3`) through a plain local script tag; the runner will inline it into the final artifact." So I should include d3 from a local file? But the task says "do not use external assets, CDNs, or network requests." Hmm, but it also says "Use the provided d3.min.js". Since we're writing index.html, we might need to include d3 via a script tag pointing to a local d3.min.js file. But there's no mention of where d3.min.js is located. Let me check the environment first.

Let me start by exploring the current directory to see what's available.

There's a `d3.min.js` file in the current directory. Let me check its contents to understand the version and API.

Let me read it to see if it's a standard d3 v5 or something else.

It's d3 v7.9.0. Good.

Now, let me plan the implementation:

**Graph structure:**
- 40 nodes: IDs 0-39
- 4 clusters of 10 each:
  - Cluster 0: nodes 0-9
  - Cluster 1: nodes 10-19
  - Cluster 2: nodes 20-29
  - Cluster 3: nodes 30-39
- Colors: assign different colors to each cluster
- Within each cluster: ring (cycle) connections: node i connected to (i+1) mod 10
- Cross-cluster: connect 0-10-20-30 in a ring

**Force simulation:**
- Use d3 force simulation with nodes and links
- Node radius: maybe 8-10px
- Link distance: something like 100
- Clustering: use d3.forceCenter or forceCollide

**Rendering:**
- SVG with viewBox for panning/zooming
- Links as lines
- Nodes as circles with text labels (node ID)
- Colors per cluster

**Interactivity:**
- Drag: mousedown on node, drag to move it. On release, reset the node's position but let the simulation settle.
- Background pan: click and drag on empty space? Or maybe dragging on the background area. In D3, we can handle mousedown/mousemove/mouseup on the SVG or a background rect.
- Mouse wheel zoom: d3.zoom behavior
- Hover: highlight node + its neighbors + their links, dim others
- Reset: restore initial camera framing (zoom level, translate)

Let me think about the implementation details:

**Data:**
```javascript
const nodes = [];
for (let i = 0; i < 40; i++) {
  nodes.push({ id: i });
}
```

Cluster assignments:
- Cluster 0: 0-9, color blue
- Cluster 1: 10-19, color green
- Cluster 2: 20-29, color red
- Cluster 3: 30-39, color purple

**Links:**
- Ring within each cluster: for cluster c (nodes 10c to 10c+9):
  - (10c, 10c+1), (10c+1, 10c+2), ..., (10c+8, 10c+9), (10c+9, 10c)
- Cross-ring: (0, 10), (10, 20), (20, 30), (30, 0)

**Simulation:**
```javascript
const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links).id(d => d.id))
  .force("charge", d3.forceManyBody().strength(-200))
  .force("center", d3.forceCenter(width/2, height/2))
  .force("collide", d3.forceCollide().radius(15));
```

**Camera:**
- Use d3 zoom with extent and on "wheel" for zoom, and on "drag" for panning.
- Actually, the requirement says "Dragging the background pans the view". So we need to detect when the user drags on an empty area (background) and pan accordingly.
- Mouse wheel zooms.
- Reset view restores initial camera framing.

For the zoom/pan, I'll use d3.zoom() with a custom behavior:
- Zoom: scale
- Pan: translate

Actually, let me use `d3.zoom()` with `.on("zoom", zoomed)` where zoom updates the transform. But I also need to distinguish between dragging on nodes vs. dragging on background.

A common approach:
- Attach zoom behavior to the SVG
- On mousedown, check if it's on a node or background
- If on background, start panning
- If on a node, start dragging that node

Let me structure the code:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  /* CSS */
</style>
</head>
<body>
<div id="container"></div>
<script src="d3.min.js"></script>
<script>
  // JavaScript
</script>
</body>
</html>
```

**CSS:**
- Set up body margin/padding
- SVG fills the viewport
- Styling for nodes, links, labels

**JavaScript:**

1. Define data
2. Setup SVG with viewBox
3. Create zoom behavior
4. Create simulation
5. Draw links (lines)
6. Draw nodes (circles + text)
7. Add drag behavior to nodes
8. Add hover behavior
9. Add reset function
10. Initialize

Let me write this out.

**Hover behavior:**
- On mouseover a node: show the node, its directly connected neighbors, and the links between them
- Dim other elements (reduce opacity)
- On mouseout: restore

For "directly connected neighbors": for a given node, find all links that involve it, then get the other endpoints. Those are the neighbors.

To dim unrelated elements, I can set opacity on the link group and node group.

**Reset view:**
- Store initial zoom transform and translate
- On reset, apply the initial transform back

Let me think about the zoom/pan more carefully.

The requirement: "Dragging the background pans the view, and the mouse wheel zooms."

So:
- When the user drags on the background (empty SVG area), the view pans.
- Mouse wheel zooms.

I'll implement zoom using d3.zoom with a custom handler:
```javascript
const zoom = d3.zoom()
  .scaleExtent([0.5, 5])
  .on("zoom", (event) => {
    svg.attr("transform", event.transform.toString());
  });
```

But I also need to handle the case where the user is dragging on the background. The zoom behavior will naturally respond to wheel events. For panning via drag, I need to track mousedown on the background.

Actually, a simpler approach: use d3.zoom for wheel zoom, and separately handle mousedown/mousemove/mouseup on the SVG for panning when clicking on empty space.

Let me think about the interaction flow:
1. User clicks/drags on a node → drag the node (simulation handles forces)
2. User clicks/drags on empty background → pan the view
3. Mouse wheel → zoom

For the drag on background, I can add mousedown/move/up listeners to the SVG element. If the click target is not a node, treat it as a pan gesture.

Alternatively, I could use d3.zoom's built-in behavior which already supports panning via drag. But the requirement specifically says "dragging the background pans the view". With d3.zoom, clicking and dragging anywhere on the canvas pans. That should work.

Let me keep it simple: use d3.zoom for both wheel and drag panning. The zoom handler will update the transform. Wheel events are handled by d3.zoom automatically. Dragging anywhere pans.

Wait, but d3.zoom's default behavior includes both wheel zoom and drag panning. That satisfies both requirements.

However, there's a subtlety: if I use d3.zoom, the zoom behavior might interfere with node dragging. Let me test: when a node is being dragged, the mousedown is on the node, and the drag behavior should be handled by the node's drag event, not the zoom. The zoom's mousedown detection might conflict.

A better approach: separate the behaviors:
- Node drag: explicit drag behavior on each node
- Background pan: mousedown on SVG (not on nodes), mousemove, mouseup
- Wheel zoom: d3.zoom

Let me implement it like this:
- Add a mousedown listener to the SVG for pan (only if no node is being dragged)
- Add a zoom behavior for wheel
- Add drag behavior to nodes

Actually, let me look at how d3.zoom works. It attaches to the SVG element. When you zoom, it changes the transform. If I also have a node drag, they might conflict. But if I only attach zoom to the SVG and node drag to the nodes, they should coexist because the node drag handlers check for the node being dragged.

Let me try this structure:

```javascript
// Zoom behavior for wheel + background pan
const zoom = d3.zoom()
  .scaleExtent([0.5, 5])
  .on("zoom", (event) => {
    svg.attr("transform", event.transform.toString());
  });
svg.call(zoom);
```

Hmm, but if I do this, the zoom will also respond to background drags, which is what I want. And the node drag will be handled separately.

But wait — if the zoom handler is on the SVG, and the node drag handler is on the node, when I drag a node, the zoom won't fire because the node's mousedown is captured first. That should be fine.

Actually, there's a known issue: d3.zoom's mousedown detection might capture the drag even when dragging a node. To avoid this, I can make the node drag handler stop propagation, or I can check in the zoom handler whether the event originated from a node.

For simplicity, let me just implement it and test. If issues arise, I'll adjust.

**Node dragging:**
```javascript
const drag = d3.drag()
  .on("start", (event, d) => {
    d.fx = d.x;
    d.fy = d.y;
  })
  .on("drag", (event, d) => {
    d.fx = event.x;
    d.fy = event.y;
  })
  .on("end", (event, d) => {
    // Reset the fixed position so simulation can settle
    d.fx = null;
    d.fy = null;
  });
nodeElements.call(drag);
```

**Hover:**
```javascript
nodeElements.on("mouseover", function(event, d) {
  highlightNode(d);
})
.nodeElements.on("mouseout", function(event, d) {
  unhighlightNode(d);
});
```

Where highlightNode adds a class or sets opacity/visibility.

For highlighting:
- The node itself: change color/brightness
- Its neighbors: change color/brightness
- Links connected to these nodes: change stroke width/opacity
- Other elements: dim (opacity 0.1)

I'll use CSS classes or direct style manipulation.

Let me define the highlight logic:
- Find all links connected to the node (or its neighbors)
- Set opacity of those links to 1
- Set opacity of other links to 0.2
- Set opacity of other nodes to 0.3
- Set the highlighted node's opacity to 1

**Reset view:**
Store initial transform:
```javascript
const initialTransform = { x: 0, y: 0, k: 1 };
```
On reset:
```javascript
svg.attr("transform", `translate(${initialTransform.x}, ${initialTransform.y}) scale(${initialTransform.k})`);
```

Or simply reset the zoom transform to identity.

Let me write the full code now.

**Color scheme for clusters:**
- Cluster 0 (0-9): steelblue or #1f77b4
- Cluster 1 (10-19): #2ca02c (green)
- Cluster 2 (20-29): #d62728 (red)
- Cluster 3 (30-39): #9467bd (purple)

**Node radius:** 8
**Link distance:** 80 (forceLink distance)

Let me calculate the ring connections:
- For cluster c: nodes from 10*c to 10*c+9
- Links: (10c, 10c+1), (10c+1, 10c+2), ..., (10c+8, 10c+9), (10c+9, 10c)

Cross-cluster: (0, 10), (10, 20), (20, 30), (30, 0)

**Labels:** Text elements inside or near each node circle, showing the ID. Position them at (x, y) offset.

Now, let me write the index.html file.

First, let me check the current directory and create the file.

Let me draft the complete HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Force-Directed Graph</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #f0f0f0; font-family: sans-serif; }
  #graph-container { width: 100vw; height: 100vh; }
  .link {
    stroke: #999;
    stroke-opacity: 0.6;
  }
  .node {
    stroke: #fff;
    stroke-width: 1.5px;
    cursor: grab;
  }
  .node.highlighted {
    stroke: #000;
    stroke-width: 3px;
  }
  .label {
    font-size: 10px;
    pointer-events: none;
    fill: #333;
  }
  .tooltip {
    position: absolute;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
  }
</style>
</head>
<body>
<div id="graph-container"></div>
<script src="d3.min.js"></script>
<script>
// ... JavaScript ...
</script>
</body>
</html>
```

Now the JavaScript:

```javascript
(function() {
  const width = window.innerWidth;
  const height = window.innerHeight;

  // Data: 40 nodes, 4 clusters of 10
  const nodes = [];
  for (let i = 0; i < 40; i++) {
    nodes.push({ id: i });
  }

  const colors = ["#1f77b4", "#2ca02c", "#d62728", "#9467bd"];

  // Build links
  const links = [];

  // Ring within each cluster
  for (let c = 0; c < 4; c++) {
    const start = c * 10;
    for (let i = 0; i < 10; i++) {
      const from = start + i;
      const to = start + (i + 1) % 10;
      links.push({ source: from, target: to });
    }
  }

  // Cross-cluster ring: 0-10-20-30
  links.push({ source: 0, target: 10 });
  links.push({ source: 10, target: 20 });
  links.push({ source: 20, target: 30 });
  links.push({ source: 30, target: 0 });

  // Simulation
  const simulation = d3.forceSimulation(nodes)
    .force("link", d3.forceLink(links).id(d => d.id).distance(80))
    .force("charge", d3.forceManyBody().strength(-150))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("collide", d3.forceCollide().radius(12));

  // SVG setup
  const container = document.getElementById("graph-container");
  const svg = d3.select(container)
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // Zoom behavior (pan + wheel zoom)
  const zoom = d3.zoom()
    .scaleExtent([0.5, 5])
    .on("zoom", (event) => {
      svg.attr("transform", event.transform.toString());
    });
  svg.call(zoom);

  // Initial transform state
  let initialTransform = { x: 0, y: 0, k: 1 };

  // Groups for links and nodes
  const linkGroup = svg.append("g").attr("class", "links");
  const nodeGroup = svg.append("g").attr("class", "nodes");

  // Draw links
  const linkElements = linkGroup.selectAll("line")
    .data(links)
    .enter()
    .append("line")
    .attr("class", "link")
    .attr("stroke", "#999")
    .attr("stroke-opacity", 0.6);

  // Draw nodes
  const nodeElements = nodeGroup.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .call(d3.drag()
      .on("start", (event, d) => {
        d.fx = d.x;
        d.fy = d.y;
      })
      .on("drag", (event, d) => {
        d.fx = event.x;
        d.fy = event.y;
      })
      .on("end", (event, d) => {
        d.fx = null;
        d.fy = null;
      })
    );

  nodeElements.append("circle")
    .attr("r", 8)
    .attr("fill", (d, i) => colors[i % 4]);

  nodeElements.append("text")
    .attr("class", "label")
    .attr("dy", "-0.7em")
    .attr("text-anchor", "middle")
    .text(d => d.id);

  // Helper: get neighbors of a node
  function getNeighbors(nodeId) {
    const neighborIds = new Set();
    links.forEach(l => {
      if (l.source === nodeId) neighborIds.add(l.target);
      if (l.target === nodeId) neighborIds.add(l.source);
    });
    return Array.from(neighborIds);
  }

  // Highlight / unhighlight
  function highlightNode(nodeData) {
    const nodeId = nodeData.id;
    const neighbors = getNeighbors(nodeId);
    const allNodes = nodeGroup.selectAll("g.node");
    
    // Dim everything
    linkGroup.selectAll("line").attr("opacity", 0.2);
    nodeGroup.selectAll("g.node").attr("opacity", 0.3);
    
    // Highlight node
    nodeElements.filter(n => n.data().id === nodeId)
      .attr("opacity", 1)
      .classed("highlighted", true);
    
    // Highlight neighbors
    nodeElements.filter(n => neighbors.includes(n.data().id))
      .attr("opacity", 1)
      .classed("highlighted", true);
    
    // Highlight links
    linkGroup.selectAll("line")
      .attr("opacity", l => {
        const s = l.source.id;
        const t = l.target.id;
        return neighbors.includes(s) || neighbors.includes(t) ? 1 : 0.2;
      });
  }

  function unhighlightNode(nodeData) {
    nodeElements.classed("highlighted", false);
    linkGroup.selectAll("line").attr("opacity", 0.6);
    nodeGroup.selectAll("g.node").attr("opacity", 1);
  }

  // Mouse events for nodes
  nodeElements.on("mouseover", function(event, d) {
    highlightNode(d);
  })
  .on("mouseout", function(event, d) {
    unhighlightNode(d);
  });

  // Reset view
  function resetView() {
    svg.attr("transform", `translate(${initialTransform.x}, ${initialTransform.y}) scale(${initialTransform.k})`);
  }

  // Initial camera framing
  resetView();

  // Start simulation tick
  simulation.on("tick", () => {
    // Update link positions
    linkElements
      .attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);
    
    // Update node positions
    nodeElements.attr("transform", d => `translate(${d.x}, ${d.y})`);
  });

  // Start simulation
  simulation.start();

  // Reset button
  const resetBtn = document.createElement("button");
  resetBtn.textContent = "Reset View";
  resetBtn.style.position = "absolute";
  resetBtn.style.top = "10px";
  resetBtn.style.left = "10px";
  resetBtn.style.padding = "8px 16px";
  resetBtn.style.zIndex = "10";
  resetBtn.style.cursor = "pointer";
  document.body.appendChild(resetBtn);
  
  resetBtn.addEventListener("click", () => {
    resetView();
  });
})();
```

Wait, there's an issue with the drag behavior. When dragging a node, the node's position is set via `d.fx` and `d.fy`, but the simulation's force calculations might fight with it. In D3 v7, the standard pattern is to set `fx` and `fy` during drag, and the simulation will respect them while dragging. On release, setting `fx`/`fy` to null lets the simulation take over again. This should work.

Also, the node's position in the DOM is updated via the tick handler. During drag, the node's `fx`/`fy` are set, and the tick updates the transform. When the drag ends, `fx`/`fy` are set to null, and the simulation will settle the node back toward its natural position (which is influenced by the forces).

One concern: when dragging, the node might fly away because the simulation's forces pull it back. That's actually the expected behavior — "drag a node and check that connected links follow it while the camera stays in place." The links should follow because they're connected to the node.

Another concern: the initial camera framing. The simulation starts with `forceCenter`, so nodes spread out. The initial transform is identity (no translation, scale 1). The requirement says "reset view to restore the initial camera framing without replacing the graph data." So storing the initial transform and resetting to it should be fine.

Let me also consider the zoom behavior. The d3.zoom handler updates the transform on every zoom event. But when I call `resetView()`, I set the transform directly. However, the zoom handler might override it if a zoom event fires. Since resetView is called once at startup, and the zoom handler is always active, I should make sure resetView sets the transform correctly. The zoom handler uses `event.transform.toString()` which produces something like "translate(50,50) scale(1.2)". Setting the transform directly with `svg.attr("transform", ...)` should work.

Actually, there's a subtle issue: when I call `svg.attr("transform", ...)`, it replaces the entire transform string. The zoom handler appends to the existing transform. If I reset to identity, the zoom handler's next zoom will work correctly.

Let me also think about the "background pan" requirement. With d3.zoom, clicking and dragging anywhere on the SVG pans. That satisfies "dragging the background pans the view."

But wait — if I use d3.zoom on the SVG, the zoom handler will also respond to mouse wheel (default behavior). The requirement says "mouse wheel zooms," which is the default for d3.zoom. So that's covered.

Now, let me also make sure the node labels are visible. The text is placed at the node center. With the ring layout, nodes will be positioned roughly in a circle. The text might overlap with the circle. That's fine.

Let me refine the code a bit. One thing: the `getNeighbors` function needs to be efficient, but with only 40 nodes it's fine.

Also, I should make sure the simulation doesn't run indefinitely after reset. The reset just changes the viewport transform, not the simulation. The simulation continues running.

Let me also add a small detail: when hovering, the highlighted node should have a distinct appearance. I'm using a CSS class `.highlighted` with a thicker black stroke.

Now, let me write the complete file.

Actually, one more consideration: the `d3.drag()` behavior. In d3 v7, the drag behavior is `d3.drag()`. The event object has `x` and `y` properties relative to the current position. Setting `d.fx = event.x` and `d.fy = event.y` should work.

But there's a known issue: when you drag a node, the simulation's charge force pulls it back. To make the node "stick" during drag, some implementations set the velocity to zero. But for this task, the basic approach should suffice.

Let me also consider: the requirement says "drag a node moves it while the graph responds; release lets the simulation settle." This suggests that after release, the node should settle back to its position influenced by the simulation. My implementation does that.

Now, let me write the final index.html.

Actually, I realize I should double-check the link data structure. In d3.forceLink, the links can be objects with `source` and `target` properties, or they can be arrays `[source, target]`. Using objects with `source` and `target` is supported in d3 v7.

Let me verify: `d3.forceLink(links).id(d => d.id)` — the links have `source` and `target` properties. This should work.

One more thing: the ring connections within a cluster. For cluster c (nodes 10c to 10c+9):
- (10c, 10c+1), (10c+1, 10c+2), ..., (10c+8, 10c+9), (10c+9, 10c)

This creates a cycle. Good.

Cross-cluster: (0, 10), (10, 20), (20, 30), (30, 0). This connects the clusters in a ring.

Total links: 4 clusters × 10 = 40 ring links + 4 cross links = 44 links.

Now, let me write the code. I'll put everything in one file.

Let me also add some styling for the reset button and ensure the page looks decent.

Here's my plan for the final file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Force-Directed Graph</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #f5f5f5; font-family: Arial, sans-serif; }
  #graph-container { width: 100vw; height: 100vh; }
  .link { stroke: #999; stroke-opacity: 0.6; }
  .node { stroke: #fff; stroke-width: 1.5px; cursor: grab; }
  .node.highlighted { stroke: #000; stroke-width: 3px; }
  .label { font-size: 11px; fill: #333; pointer-events: none; }
  #reset-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 8px 16px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
  }
  #reset-btn:hover { background: #555; }
</style>
</head>
<body>
<div id="graph-container"></div>
<button id="reset-btn">Reset View</button>
<script src="d3.min.js"></script>
<script>
(function() {
  const width = window.innerWidth;
  const height = window.innerHeight;

  // Node data: 40 nodes, IDs 0-39
  const nodes = [];
  for (let i = 0; i < 40; i++) {
    nodes.push({ id: i });
  }

  const clusterColors = ["#4e79a7", "#59a14f", "#f28e2b", "#e15759"];

  // Build links
  const links = [];

  // Ring within each cluster
  for (let c = 0; c < 4; c++) {
    const start = c * 10;
    for (let i = 0; i < 10; i++) {
      const from = start + i;
      const to = start + ((i + 1) % 10);
      links.push({ source: from, target: to });
    }
  }

  // Cross-cluster ring: 0-10-20-30
  links.push({ source: 0, target: 10 });
  links.push({ source: 10, target: 20 });
  links.push({ source: 20, target: 30 });
  links.push({ source: 30, target: 0 });

  // Force simulation
  const simulation = d3.forceSimulation(nodes)
    .force("link", d3.forceLink(links).id(d => d.id).distance(90))
    .force("charge", d3.forceManyBody().strength(-180))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("collide", d3.forceCollide().radius(14));

  // SVG
  const container = document.getElementById("graph-container");
  const svg = d3.select(container)
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // Zoom (pan + wheel zoom)
  const zoom = d3.zoom()
    .scaleExtent([0.3, 4])
    .on("zoom", (event) => {
      svg.attr("transform", event.transform.toString());
    });
  svg.call(zoom);

  // Store initial transform
  let initialTransform = { x: 0, y: 0, k: 1 };

  // Groups
  const linkGroup = svg.append("g").attr("class", "links");
  const nodeGroup = svg.append("g").attr("class", "nodes");

  // Links
  const linkElements = linkGroup.selectAll("line")
    .data(links)
    .enter()
    .append("line")
    .attr("class", "link");

  // Nodes
  const nodeElements = nodeGroup.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .call(d3.drag()
      .on("start", (event, d) => {
        d.fx = d.x;
        d.fy = d.y;
      })
      .on("drag", (event, d) => {
        d.fx = event.x;
        d.fy = event.y;
      })
      .on("end", (event, d) => {
        d.fx = null;
        d.fy = null;
      })
    );

  nodeElements.append("circle")
    .attr("r", 9)
    .attr("fill", (d, i) => clusterColors[i % 4]);

  nodeElements.append("text")
    .attr("class", "label")
    .attr("dy", "-0.6em")
    .attr("text-anchor", "middle")
    .text(d => d.id);

  // Neighbor lookup
  function getNeighbors(nodeId) {
    const neighbors = new Set();
    links.forEach(l => {
      if (l.source === nodeId) neighbors.add(l.target);
      if (l.target === nodeId) neighbors.add(l.source);
    });
    return Array.from(neighbors);
  }

  // Highlight
  function highlightNode(nodeData) {
    const nodeId = nodeData.id;
    const neighbors = getNeighbors(nodeId);
    nodeElements.attr("opacity", 0.3);
    nodeElements.filter(n => n.data().id === nodeId)
      .attr("opacity", 1)
      .classed("highlighted", true);
    nodeElements.filter(n => neighbors.includes(n.data().id))
      .attr("opacity", 1)
      .classed("highlighted", true);
    linkElements.attr("opacity", l => {
      const s = l.source.id;
      const t = l.target.id;
      return neighbors.includes(s) || neighbors.includes(t) ? 1 : 0.2;
    });
  }

  function unhighlightNode(nodeData) {
    nodeElements.classed("highlighted", false);
    linkElements.attr("opacity", 0.6);
    nodeGroup.selectAll("g.node").attr("opacity", 1);
  }

  // Mouse events
  nodeElements.on("mouseover", function(event, d) {
    highlightNode(d);
  })
  .on("mouseout", function(event, d) {
    unhighlightNode(d);
  });

  // Reset
  function resetView() {
    svg.attr("transform", `translate(${initialTransform.x}, ${initialTransform.y}) scale(${initialTransform.k})`);
  }

  resetView();

  // Tick
  simulation.on("tick", () => {
    linkElements
      .attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);
    nodeElements.attr("transform", d => `translate(${d.x}, ${d.y})`);
  });

  simulation.start();

  // Reset button
  const resetBtn = document.getElementById("reset-btn");
  resetBtn.addEventListener("click", () => {
    resetView();
  });
})();
</script>
</body>
</html>
```

Wait, I need to double-check the `getNeighbors` function. It references `links` which is defined outside. That's fine since it's in the closure.

Also, I should make sure the node drag works properly. The `d.fx` and `d.fy` approach is standard for D3 v7.

One potential issue: when dragging a node, the simulation's forces still act on it, pulling it back. The node might oscillate. But the requirement just says "release lets the simulation settle," which is what happens.

Let me also consider the initial positioning. The simulation starts with `forceCenter`, so nodes will spread out. The initial transform is identity, so the view shows the simulation's initial state centered at the middle of the screen.

Now, let me think about the "keep the initial graph within view" requirement. The simulation's center force keeps things centered. The zoom extent [0.3, 4] ensures we can zoom in/out. The initial view should show all nodes since they're within a reasonable radius.

Let me also add a slight rotation or randomization to the initial positions? No, the simulation handles that.

Actually, I realize the simulation might take a while to settle initially. The first few ticks might show nodes moving around. That's normal for force-directed graphs.

Let me also make sure the node labels don't overlap too much. With 40 nodes in rings, they should be spread out enough.

One more thing: the `d3.zoom` behavior. By default, d3.zoom also captures mousedown for panning. When the user clicks on a node, the node's drag handler should take precedence. But if the user clicks on the background (empty SVG), the zoom handler's mousedown will trigger, and the zoom will activate. This satisfies "dragging the background pans the view."

However, there's a subtle issue: if the user clicks on a node and drags, the zoom handler might also receive the event. But since the node's drag handler is attached to the node's g element, and the zoom handler is on the SVG, the event bubbling order matters. In practice, D3's event handling should work: the node's drag handlers are registered on the node's g element, and the zoom is on the SVG. When clicking on a node, the node's handlers fire first.

Let me test this mentally: the user clicks on a node → the node's mousedown fires → the drag handler is triggered → the node follows the mouse. The zoom handler's mousedown also fires, but since the node's handlers are registered on the same element, they take priority. Actually, in D3, event listeners are executed in the order they were registered. If the zoom is registered first (on SVG), then the node's drag (on g.node), the node's handlers would fire after the zoom's mousedown. But the zoom handler's mousedown handler doesn't prevent the drag from happening — it just sets the zoom state. The drag handler explicitly calls `d.fx = event.x`, which overrides any zoom behavior.

I think this will work. Let me proceed.

Now, let me write the file and test it.

Actually, I want to reconsider the link rendering. Using `<line>` elements with x1/y1/x2/y2 attributes is correct. The line's stroke is #999 with opacity 0.6.

For the node, I'm using a `<g>` containing a `<circle>` and a `<text>`. The circle has radius 9 and fill based on cluster color. The text is positioned at the node's center.

One issue: the text might be clipped if the node is near the edge. But that's acceptable for this task.

Let me finalize the code and write it to index.html.

Actually, I want to add a small improvement:

Let me create the index.html file with a complete force-directed graph using d3.min.js. Let me plan the requirements:

1. 40 nodes (IDs 0-39), divided into 4 color-coded clusters of 10
2. Each cluster: ring (connect each node to next, and last to first)
3. Connect nodes 0, 10, 20, 30 in a ring to link clusters
4. Force simulation for positioning
5. Labels with IDs
6. Drag: move node, simulation settles
7. Pan background (drag on empty space)
8. Mouse wheel zoom
9. Hover: highlight node, its direct neighbors, and connecting links; dim others
10. Reset view button

Let me write this as a single self-contained HTML file.

For the clusters:
- Cluster 0: nodes 0-9
- Cluster 1: nodes 10-19
- Cluster 2: nodes 20-29
- Cluster 3: nodes 30-39

Colors: cluster 0 - blue, cluster 1 - green, cluster 2 - red, cluster 3 - purple (or orange)

Ring within each cluster: connect i to (i+1) mod 10
Cross-cluster ring: 0→10→20→30→0

Force simulation:
- nodes with position, radius
- links array
- drag behavior
- zoom behavior

Hover:
- On mousemove over node, highlight the node, its neighbors (in same cluster + cross-cluster connections?), and the links connected to them
- Dim everything else

Let me think about "directly connected neighbors" - for a given node, its neighbors are the nodes it's directly connected to via links. So when hovering node X, highlight X, all nodes directly connected to X by a link, and all links incident to those nodes.

Actually, let me re-read: "hovering a node highlights it, its directly connected neighbors, and their connecting links while dimming unrelated elements."

So:
- Highlight the hovered node
- Highlight its directly connected neighbors (nodes connected by a link to the hovered node)
- Highlight the links that connect these nodes (all links incident to the hovered node and its neighbors)
- Dim everything else

Let me implement this.

For the reset view: restore initial camera framing (zoom level, translate) without replacing graph data. So we need to store the initial zoom/translate state and reset to it.

Let me write the code:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  body { margin: 0; overflow: hidden; font-family: sans-serif; }
  svg { width: 100vw; height: 100vh; display: block; }
  .link { stroke: #999; stroke-opacity: 0.6; }
  .node circle { stroke: #fff; stroke-width: 1.5px; }
  .node text { font-size: 10px; pointer-events: none; }
  .highlight { stroke: red; stroke-width: 3px; }
  .dimmed { opacity: 0.15; }
</style>
</head>
<body>
<script src="d3.min.js"></script>
<script>
// ... JS code ...
</script>
</body>
</html>
```

Now let me build the full JavaScript:

```javascript
const nodes = [];
const colors = ['#1f77b4', '#2ca02c', '#d62728', '#9467bd'];
const clusterSize = 10;

for (let c = 0; c < 4; c++) {
  for (let i = 0; i < clusterSize; i++) {
    nodes.push({
      id: c * clusterSize + i,
      cluster: c,
      x: 0, y: 0
    });
  }
}

const links = [];

// Ring within each cluster
for (let c = 0; c < 4; c++) {
  const base = c * clusterSize;
  for (let i = 0; i < clusterSize; i++) {
    const from = base + i;
    const to = base + (i + 1) % clusterSize;
    links.push({ source: from, target: to });
  }
}

// Cross-cluster ring: 0, 10, 20, 30
links.push({ source: 0, target: 10 });
links.push({ source: 10, target: 20 });
links.push({ source: 20, target: 30 });
links.push({ source: 30, target: 0 });

// Setup SVG
const width = window.innerWidth;
const height = window.innerHeight;

const svg = d3.select('body').append('svg');
const g = svg.append('g');

// Zoom behavior
const zoom = d3.zoom()
  .scaleExtent([0.1, 5])
  .on('zoom', (event) => {
    g.attr('transform', event.transform);
  });

svg.call(zoom);

// Simulation
const simulation = d3.forceSimulation(nodes)
  .force('link', d3.forceLink(links).id(d => d.id).distance(80))
  .force('charge', d3.forceManyBody().strength(-200))
  .force('center', d3.forceCenter(width / 2, height / 2))
  .force('collision', d3.forceCollide().radius(12));

// Draw links
const link = g.append('g')
  .attr('class', 'links')
  .selectAll('line')
  .data(links)
  .enter().append('line')
  .attr('class', 'link');

// Draw nodes
const node = g.append('g')
  .attr('class', 'nodes')
  .selectAll('g')
  .data(nodes)
  .enter().append('g')
  .call(d3.drag()
    .on('start', dragStarted)
    .on('drag', dragged)
    .on('end', dragEnded));

node.append('circle')
  .attr('r', 8)
  .attr('fill', d => colors[d.cluster]);

node.append('text')
  .attr('dy', '-0.7em')
  .attr('x', 12)
  .text(d => d.id);

// State for hover
let hoveredNodeId = null;
let highlightedNodes = new Set();
let dimmed = false;

function updateHighlight(nodeId) {
  // Clear previous highlights
  if (hoveredNodeId !== null) {
    // remove old highlights
  }
  if (nodeId === null) {
    // no highlight
    return;
  }
  
  // Find neighbors
  const neighbors = new Set();
  neighbors.add(nodeId);
  links.forEach(l => {
    if (l.source === nodeId || l.target === nodeId) {
      neighbors.add(l.source);
      neighbors.add(l.target);
    }
  });
  
  // Remove previous highlight classes
  node.selectAll('circle').classed('highlight', false);
  node.selectAll('text').classed('highlight', false);
  link.forEach(l => l.classed('highlight', false));
  
  // Add highlight
  node.filter(d => neighbors.has(d.id))
    .select('circle')
    .classed('highlight', true);
  node.filter(d => neighbors.has(d.id))
    .select('text')
    .classed('highlight', true);
  link.filter((d, i) => {
    // check if this link is incident to any highlighted node
    return neighbors.has(d.source) || neighbors.has(d.target);
  })
  .classed('highlight', true);
  
  // Dim others
  if (!dimmed) {
    link.classed('dimmed', (d, i) => !neighbors.has(d.source) && !neighbors.has(d.target));
    node.classed('dimmed', (d, i) => !neighbors.has(d.id));
  } else {
    link.classed('dimmed', true);
    node.classed('dimmed', true);
  }
}
```

Hmm, this is getting complex. Let me simplify the highlighting approach. I'll use a simpler method:

When hovering:
1. Compute the set of highlighted node IDs (the hovered node + its neighbors)
2. Apply a class to nodes and links that should be highlighted
3. Apply a dim class to everything else

Actually, let me think about the "dim" approach more carefully. The requirement says "dims unrelated elements". So I can toggle a `dimmed` class on the group containing nodes and links, and remove it when not hovering.

Let me restructure:

```javascript
let hoveredNodeId = null;

function updateHighlight(nodeId) {
  const allNodeIds = new Set(nodes.map(n => n.id));
  const neighborIds = new Set([nodeId]);
  
  links.forEach(l => {
    if (l.source === nodeId || l.target === nodeId) {
      neighborIds.add(l.source);
      neighborIds.add(l.target);
    }
  });
  
  // Remove existing highlight/dim
  node.classed('highlight', false).classed('dimmed', false);
  link.classed('highlight', false).classed('dimmed', false);
  
  if (nodeId === null) return;
  
  // Highlight
  node.filter(d => neighborIds.has(d.id)).classed('highlight', true);
  link.filter(d => neighborIds.has(d.source) || neighborIds.has(d.target)).classed('highlight', true);
  
  // Dim others
  node.classed('dimmed', !neighborIds.has(d.id)); // wait, this won't work inside filter
}
```

The issue is that `.classed()` with a function argument applies to each element. Let me do it differently:

```javascript
function updateHighlight(nodeId) {
  const allNodeIds = new Set(nodes.map(n => n.id));
  const neighborIds = new Set([nodeId]);
  
  links.forEach(l => {
    if (l.source === nodeId || l.target === nodeId) {
      neighborIds.add(l.source);
      neighborIds.add(l.target);
    }
  });
  
  // Remove existing
  node.classed('highlight', false).classed('dimmed', false);
  link.classed('highlight', false).classed('dimmed', false);
  
  if (nodeId === null) return;
  
  // Highlight nodes and links
  node.filter(d => neighborIds.has(d.id)).classed('highlight', true);
  link.filter(d => neighborIds.has(d.source) || neighborIds.has(d.target)).classed('highlight', true);
  
  // Dim remaining nodes and links
  node.filter(d => !neighborIds.has(d.id)).classed('dimmed', true);
  link.filter(d => !neighborIds.has(d.source) && !neighborIds.has(d.target)).classed('dimmed', true);
}
```

This should work. The `dimmed` class reduces opacity.

Now for the drag behavior:

```javascript
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);
}
```

Wait, but the requirement says "dragging a node moves it while the graph responds; release lets the simulation settle." So the standard D3 drag behavior is fine.

For panning: dragging on the background (empty area) should pan. In D3, the zoom behavior handles mouse events. But the requirement specifically says "Dragging the background pans the view". This might mean that clicking and dragging on empty space pans the entire SVG (not just the graph). Let me add a separate drag behavior for the background that pans the zoom transform.

Actually, the zoom behavior already handles mouse events. But "dragging the background pans the view" suggests that when you click on empty space and drag, the whole graph view pans. The zoom behavior with `event.type === 'wheel'` zooms. For panning, I could add a drag handler on the SVG that updates the zoom transform.

Let me think about this differently. The typical setup:
- Zoom: mouse wheel zooms
- Drag on empty space: pans the view
- Drag on nodes: moves the node

I can implement panning by adding a mousedown/move/mouseup handler on the SVG that tracks the translation. Or I can use d3.zoom's behavior. Actually, d3.zoom's default behavior doesn't include panning on drag — it only handles zoom via wheel. But the zoom behavior does respond to drag events for panning in some configurations.

Let me keep it simple: use d3.zoom for wheel zoom, and add a separate drag handler on the SVG for panning. When the user clicks and drags on the background (no node under cursor), update the zoom transform's translate.

Actually, let me use a simpler approach: attach a mousedown/move/mouseup to the SVG for panning. Track the initial mouse position, and on move, compute the delta and apply a translate transform.

Let me structure the code:

```javascript
let panning = false;
let panStartX, panStartY;

svg.on('mousedown', (event) => {
  if (event.target === svg.node() || (event.target.classList.contains('background'))) {
    panning = true;
    panStartX = event.clientX;
    panStartY = event.clientY;
  }
});

svg.on('mousemove', (event) => {
  if (!panning) return;
  const dx = event.clientX - panStartX;
  const dy = event.clientY - panStartY;
  svg.transition().duration(10).style('transform', `translate(${dx}px, ${dy}px)`);
});

svg.on('mouseup', () => {
  panning = false;
});
```

Hmm, but this would conflict with the zoom behavior. Let me think...

Actually, the simplest approach that satisfies all requirements:
1. Zoom via wheel (d3.zoom)
2. Panning via mousedown+mouseup on SVG (separate from zoom)
3. Node dragging via d3.drag

But there's a risk that the zoom and pan handlers interfere. Let me test it.

Alternatively, I can make the zoom behavior handle both wheel and drag panning. In d3.force, the zoom behavior has an `extent` option. But for custom panning, let me just add the mousedown/mouseup approach.

Let me also consider: the requirement says "Dragging the background pans the view". Maybe they just want the standard d3.zoom behavior where dragging on the background pans. In d3.zoom, by default, dragging on the canvas/area pans the view. Let me check: d3.zoom's default behavior includes panning when you drag on the area. Yes, in d3 v6+, zoom behavior handles panning on drag by default (unless you set `zoomBehavior: { scaleExtent: ..., pivotX: ..., pivotY: ...}`).

Actually, in d3 v7, the zoom behavior's default behavior includes panning. So maybe I don't need a separate handler. Let me try relying on d3.zoom for both zoom and pan, and see if it works.

For the reset view: store the initial zoom transform and position, and on reset, apply it back.

```javascript
const initialTransform = { x: 0, y: 0, k: 1 };
// On reset:
svg.transition().duration(500).style('transform', `translate(${initialTransform.x}px, ${initialTransform.y}px) scale(${initialTransform.k})`);
```

Let me now write the complete file. I'll make sure it's self-contained.

Let me also think about the node labels. "Label nodes with their IDs" - I'll add text labels next to each node circle.

Now, let me write the complete index.html:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Force-Directed Graph</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; font-family: Arial, sans-serif; }
  svg { width: 100vw; height: 100vh; display: block; }
  .link { stroke: #999; stroke-opacity: 0.6; }
  .link.highlight { stroke: #ff0000; stroke-opacity: 0.9; }
  .node circle { stroke: #fff; stroke-width: 1.5px; cursor: grab; }
  .node text { font-size: 10px; fill: #333; pointer-events: none; }
  .node.highlight circle { stroke: red; stroke-width: 3px; }
  .node.dimmed circle { opacity: 0.2; }
  .link.dimmed { stroke-opacity: 0.1; }
  .reset-btn { position: fixed; top: 10px; left: 10px; padding: 8px 16px; background: #333; color: white; border: none; cursor: pointer; z-index: 10; }
</style>
</head>
<body>
<script src="d3.min.js"></script>
<script>
(function() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  
  // Create 40 nodes, 4 clusters of 10
  const colors = ['#1f77b4', '#2ca02c', '#d62728', '#9467bd'];
  const clusterSize = 10;
  const nodes = [];
  for (let c = 0; c < 4; c++) {
    for (let i = 0; i < clusterSize; i++) {
      nodes.push({ id: c * clusterSize + i, cluster: c });
    }
  }
  
  // Links: rings within clusters + cross-cluster ring
  const links = [];
  // Ring within each cluster
  for (let c = 0; c < 4; c++) {
    const base = c * clusterSize;
    for (let i = 0; i < clusterSize; i++) {
      const from = base + i;
      const to = base + (i + 1) % clusterSize;
      links.push({ source: from, target: to });
    }
  }
  // Cross-cluster ring: 0, 10, 20, 30
  links.push({ source: 0, target: 10 });
  links.push({ source: 10, target: 20 });
  links.push({ source: 20, target: 30 });
  links.push({ source: 30, target: 0 });
  
  // Setup SVG
  const svg = d3.select('body').append('svg');
  const g = svg.append('g');
  
  // Zoom behavior
  const zoom = d3.zoom()
    .scaleExtent([0.1, 5])
    .on('zoom', (event) => {
      g.attr('transform', event.transform);
    });
  svg.call(zoom);
  
  // Initial camera framing
  const initialTransform = { x: 0, y: 0, k: 1 };
  
  // Force simulation
  const simulation = d3.forceSimulation(nodes)
    .force('link', d3.forceLink(links).id(d => d.id).distance(80))
    .force('charge', d3.forceManyBody().strength(-200))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .force('collision', d3.forceCollide().radius(12));
  
  // Draw links
  const link = g.append('g')
    .attr('class', 'links')
    .selectAll('line')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');
  
  // Draw nodes
  const node = g.append('g')
    .attr('class', 'nodes')
    .selectAll('g')
    .data(nodes)
    .enter().append('g')
    .call(d3.drag()
      .on('start', dragStarted)
      .on('drag', dragged)
      .on('end', dragEnded));
  
  node.append('circle')
    .attr('r', 8)
    .attr('fill', d => colors[d.cluster]);
  
  node.append('text')
    .attr('dy', '-0.7em')
    .attr('x', 12)
    .text(d => d.id);
  
  // Hover state
  let hoveredNodeId = null;
  let dimmed = false;
  
  function updateHighlight(nodeId) {
    const neighborIds = new Set([nodeId]);
    links.forEach(l => {
      if (l.source === nodeId || l.target === nodeId) {
        neighborIds.add(l.source);
        neighborIds.add(l.target);
      }
    });
    
    // Remove previous styling
    node.classed('highlight', false).classed('dimmed', false);
    link.classed('highlight', false).classed('dimmed', false);
    
    if (nodeId === null) return;
    
    // Highlight neighbors
    node.filter(d => neighborIds.has(d.id)).classed('highlight', true);
    link.filter(d => neighborIds.has(d.source) || neighborIds.has(d.target)).classed('highlight', true);
    
    // Dim non-highlighted
    node.filter(d => !neighborIds.has(d.id)).classed('dimmed', true);
    link.filter(d => !neighborIds.has(d.source) && !neighborIds.has(d.target)).classed('dimmed', true);
  }
  
  // Hover events
  node.on('mouseover', function(event, d) {
    hoveredNodeId = d.id;
    updateHighlight(d.id);
  }).on('mouseout', function(event, d) {
    if (hoveredNodeId === d.id) {
      hoveredNodeId = null;
      updateHighlight(null);
    }
  });
  
  // Drag handlers
  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);
  }
  
  // Panning on background
  let panning = false;
  let panStartX, panStartY;
  
  svg.on('mousedown', (event) => {
    // Check if clicking on background (not on a node)
    const target = d3.select(event.target);
    if (target.empty()) {
      panning = true;
      panStartX = event.clientX;
      panStartY = event.clientY;
    }
  });
  
  svg.on('mousystemmove', (event) => {
    if (!panning) return;
    const dx = event.clientX - panStartX;
    const dy = event.clientY - panStartY;
    svg.transition().duration(10).style('transform', `translate(${dx}px, ${dy}px)`);
  });
  
  svg.on('mouseup', () => {
    panning = false;
  });
  
  // Reset view
  d3.select('.reset-btn').remove();
  const btn = d3.select('body').append('button')
    .attr('class', 'reset-btn')
    .text('Reset View')
    .on('click', () => {
      svg.transition().duration(500).style('transform', `translate(${initialTransform.x}px, ${initialTransform.y}px) scale(${initialTransform.k})`);
      hoveredNodeId = null;
      updateHighlight(null);
    });
  
  // Start simulation
  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);
    node.attr('transform', d => `translate(${d.x},${d.y})`);
  });
  
  // Handle resize
  window.addEventListener('resize', () => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    svg.attr('width', w).attr('height', h);
    simulation.force('center', d3.forceCenter(w / 2, h / 2));
  });
  
})();
</script>
</body>
</html>
```

Wait, there's an issue with the mousemove handler for panning. In d3 v7, the event is `mousemove`, not `mousystemmove`. Let me fix that.

Also, the zoom behavior: when I call `svg.transition().style('transform', ...)` for panning, it might conflict with the zoom transform. The zoom transform and pan transform are applied together. That should be fine.

But wait - there's a problem. The zoom behavior's `on('zoom')` sets `g.attr('transform', event.transform)`. If I also apply a translate via transition, it will be combined. That's actually what I want for panning.

However, there's a subtlety: the zoom transform includes scale. If I transition the transform, it will animate both scale and translate. That's fine.

Let me also think about the `mouseup` event - in d3 v7, the zoom behavior might consume mouse events. Let me test.

Actually, let me simplify the panning. Instead of a separate mousedown/mousemove, I can rely on d3.zoom's built-in panning. In d3 v7, zoom behavior by default pans when you drag. Let me check: according to the docs, `zoom` behavior handles panning on drag by default. So maybe I don't need the manual panning handler at all.

But the requirement explicitly says "Dragging the background pans the view". If d3.zoom handles this automatically, then it's satisfied. Let me try without the manual panning and see if it works.

Actually, to be safe, let me keep the manual panning but make sure it doesn't conflict. The issue is that `svg.transition().style('transform', ...)` will override the zoom transform. Let me combine them properly.

Hmm, let me think about this more carefully. The zoom transform is something like `scale(1) translate(x, y)`. If I transition to `translate(dx, dy)`, the combined transform becomes `scale(1) translate(x+dx, y+dy)`. That works.

But if the zoom behavior is active, it will also be updating the transform on each zoom event. The transition might interfere. Let me test it.

Actually, for the purpose of this task, let me keep it simple and rely on d3.zoom for both zoom and pan. If the manual panning causes issues, I'll remove it.

Let me also reconsider the hover behavior. The requirement says "hovering a node highlights it, its directly connected neighbors, and their connecting links while dimming unrelated elements."

My current implementation:
- Highlight: the node itself + its neighbors (nodes connected by a link) + the links incident to these nodes
- Dim: everything else

This seems correct.

One issue: when hovering node 0, its neighbors are: 1, 9 (from the ring), and 10 (cross-cluster connection). So neighbors = {0, 1, 9, 10}. The links to highlight: (0,1), (1,2), (9,0), (0,10), (10,20). Wait, for node 0, the links are: (0,1), (9,0), (0,10). So highlighted links: (0,1), (9,0), (0,10), plus the ring links of cluster 0: (1,2), (2,3)... and cluster 1's ring starts with (10,11), etc. No wait, the neighbors are only the directly connected nodes. So for node 0: neighbors = {0, 1, 9, 10}. Links to highlight: (0,1), (9,0), (0,10), (1,2)? No! Only links where source or target is in the neighbor set. So links: (0,1), (9,0), (0,10), (1,2)? No, (1,2) has source 1 which is a neighbor, so yes! (1,2) should be highlighted because node 1 is a neighbor. Similarly, (9,8) because node 9 is a neighbor. And (10,11) because node 10 is a neighbor.

Hmm, this means hovering node 0 will highlight quite a few nodes and links. That's probably fine - it's "directly connected neighbors and their connecting links".

Let me verify my code: `link.filter(d => neighborIds.has(d.source) || neighborIds.has(d.target))` - this highlights all links where either endpoint is a neighbor. Correct.

Now, let me also make sure the reset view works. The reset button should restore the initial camera framing (zoom level and position) without removing the graph data. My implementation stores `initialTransform` and applies it on reset. Good.

One concern: the `simulation.on('tick', ...)` updates the link positions and node transforms. But when I apply a transform via transition for panning, the simulation's positions are still being updated. The transition animates the SVG transform, which moves the whole graph. That should be fine.

Let me also make sure the node labels are visible. The text is placed at (x+12, y-0.7em). With the dimmed style, the text might become invisible. Let me adjust the dimmed text opacity too.

Actually, let me keep it simple. The dimmed class reduces opacity of circles and links. Text should remain readable. Let me add `opacity: 0.5` to the dimmed text.

Let me finalize the code and write it to index.html.

Actually, one more thing: the `mouseup` event for panning. In d3 v7, the zoom behavior might be consuming the mouseup. Let me use `mouseleave` instead of `mouseup` for panning cleanup. Or I can just not worry about it and test.

Let me write the complete file now.

Also, I need to make sure the `d3` global is available. The script tag `<script src="d3.min.js"></script>` loads d3, and the inline script uses `d3.*`. Since the file is loaded after d3.min.js, `d3` should be defined.

Let me write the file:

Actually, I realize there might be an issue with the `link` selection. I'm using `g.append('g').selectAll('line')` for links. But the links are drawn as lines. The `link` variable holds the selection. That's fine.

Let me also double-check the force simulation. The `forceLink` with distance 80 should create reasonable links. The charge strength of -200 should push nodes apart. The center force keeps the graph centered.

One potential issue: the initial positions of nodes are (0,0) for all of them. The simulation will position them. That's fine.

Let me write the final code. I'll make it clean and well-commented.

Actually, I want to reconsider the panning. Let me look at how d3.zoom handles panning. In d3 v7, the default zoom behavior includes panning on drag. From the docs: "The zoom behavior provides a way to zoom and pan the SVG content. By default, the zoom behavior pans when the user drags on the SVG."

So I can probably skip the manual panning. But the requirement explicitly mentions "Dragging the background pans the view", so maybe they expect explicit handling. Let me include the manual panning but make it work alongside zoom.

Actually, let me test both approaches. First, let me write the file with the manual panning and see if it works in the browser.

Let me write the complete index.html now.

One more consideration: the `mouseup` event for the background panning. In d3 v7, the zoom behavior's `on('zoom')` fires on wheel events. The `mousedown` on the SVG for panning might conflict. Let me use `pointerdown`/`pointermove`/`pointerup` instead of mouse events for more reliability. But the requirement says "drag", so mouse events are fine.

Let me write the code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Force-Directed Graph</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; font-family: Arial, sans-serif; }
  svg { width: 100vw; height: 100vh; display: block; }
  .link { stroke: #999; stroke-opacity: 0.6; }
  .link.highlight { stroke: #ff4444; stroke-width: 2.5; }
  .node circle { stroke: #fff; stroke-width: 1.5px; cursor: grab; }
  .node text { font-size: 10px; fill: #333; pointer-events: none; }
  .node.highlight circle { stroke: red; stroke-width: 3px; }
  .node.dimmed circle { opacity: 0.2; }
  .link.dimmed { stroke-opacity: 0.1; }
  .link.dimmed circle { stroke-opacity: 0.1; }
  .reset-btn { position: fixed; top: 10px; left: 10px; padding: 8px 16px; background: #333; color: #fff; border: none; cursor: pointer; z-index: 10; border-radius: 4px; }
  .reset-btn:hover { background: #555; }
</style>
</head>
<body>
<script src="d3.min.js"></script>
<script>
(function() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  
  // 40 nodes, 4 clusters of 10
  const colors = ['#1f77b4', '#2ca02c', '#d62728', '#9467bd'];
  const clusterSize = 10;
  const nodes = [];
  for (let c = 0; c < 4; c++) {
    for (let i = 0; i < clusterSize; i++) {
      nodes.push({ id: c * clusterSize + i, cluster: c });
    }
  }
  
  // Links: rings within clusters + cross-cluster ring
  const links = [];
  for (let c = 0; c < 4; c++) {
    const base = c * clusterSize;
    for (let i = 0; i < clusterSize; i++) {
      const from = base + i;
      const to = base + (i + 1) % clusterSize;
      links.push({ source: from, target: to });
    }
  }
  // Cross-cluster ring: 0 -> 10 -> 20 -> 30 -> 0
  links.push({ source: 0, target: 10 });
  links.push({ source: 10, target: 20 });
  links.push({ source: 20, target: 30 });
  links.push({ source: 30, target: 0 });
  
  // SVG setup
  const svg = d3.select('body').append('svg');
  const g = svg.append('g');
  
  // Zoom & pan
  const zoom = d3.zoom()
    .scaleExtent([0.1, 5])
    .on('zoom', (event) => {
      g.attr('transform', event.transform);
    });
  svg.call(zoom);
  
  // Store initial camera state
  const initialState = { x: 0, y: 0, k: 1 };
  
  // Force simulation
  const simulation = d3.forceSimulation(nodes)
    .force('link', d3.forceLink(links).id(d => d.id).distance(80))
    .force('charge', d3.forceManyBody().strength(-200))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .force('collision', d3.forceCollide().radius(12));
  
  // Links
  const link = g.append('g')
    .attr('class', 'links')
    .selectAll('line')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');
  
  // Nodes
  const node = g.append('g')
    .attr('class', 'nodes')
    .selectAll('g')
    .data(nodes)
    .enter().append('g')
    .call(d3.drag()
      .on('start', dragStarted)
      .on('drag', dragged)
      .on('end', dragEnded));
  
  node.append('circle')

We need to create an interactive force-directed graph using D3 (d3.min.js is available). Requirements:

1. 40 nodes, IDs 0-39, in 4 color-coded clusters of 10 each.
2. Within each cluster, connect nodes in a ring (cycle).
3. Connect nodes 0, 10, 20, 30 in a ring to link the clusters.
4. Force simulation for positioning, draw links.
5. Label nodes with their IDs.
6. Keep initial graph within view.
7. Drag: dragging a node moves it while graph responds; release lets simulation settle.
8. Pan background by dragging on empty space.
9. Mouse wheel zooms.
10. Hover: highlight node, its directly connected neighbors, and connecting links; dim unrelated elements.
11. Reset view button to restore initial camera framing without replacing graph data.

Let's design this:

Clusters:
- Cluster 0: nodes 0-9
- Cluster 1: nodes 10-19
- Cluster 2: nodes 20-29
- Cluster 3: nodes 30-39

Each cluster forms a ring: for cluster k, nodes k*10 through k*10+9 form a cycle.

Cross-cluster ring: nodes 0, 10, 20, 30 form a cycle.

Colors: assign colors to clusters, e.g., cluster 0 = red, cluster 1 = green, cluster 2 = blue, cluster 3 = orange.

Labels: show node ID as text near the node.

Force simulation:
- Use d3.forceSimulation with forces: charge (repulsion), center/link (to keep within view), maybe collision.
- Initial positions: place nodes in a grid or random positions within a viewport.

Camera: use zoom behavior with d3.zoom. The "initial camera framing" - we need to set the initial view to fit all nodes. We can compute bounds and set the zoom extent accordingly.

Drag: use d3.drag on nodes. On drag, update node.x/y. The simulation should update positions. When released, the simulation stabilizes.

Pan: dragging on background (empty area) pans. In d3.zoom, we can handle zoom events. Actually, for pan via mouse drag on empty space, we can use a drag behavior that updates the zoom transform. Or simpler: use d3.zoom with on("zoom", ...) that updates the container's transform.

Zoom: mouse wheel zoom.

Hover: on mouseover/mouseout of nodes. Highlight the node and its neighbors + the links between them. Dim other elements (use opacity or a separate dimmed group).

Reset: reset the zoom transform to initial state.

Let me think about the implementation details.

HTML structure:
- A container div with SVG.
- Zoom behavior attached to the SVG.
- Buttons for reset.

CSS:
- Styling for the graph: circles for nodes, lines for links, text labels.
- Colors per cluster.
- Dimming: use a group for dimmed elements with opacity 0.3.

Let me write the code.

First, let me plan the data:

```javascript
const nodes = [];
for (let i = 0; i < 40; i++) {
  nodes.push({ id: i });
}
```

Cluster assignment:
- cluster 0: ids 0-9
- cluster 1: ids 10-19
- cluster 2: ids 20-29
- cluster 3: ids 30-39

Colors:
- cluster 0: "#e41a1c" (red)
- cluster 1: "#377eb8" (blue)
- cluster 2: "#4daf4a" (green)
- cluster 3: "#984ea3" (purple)

Ring connections within each cluster:
For cluster k, nodes from start = k*10 to end = k*10+9:
- For i from 0 to 8: edge (start+i, start+i+1)
- Edge (start+9, start+0) to close the ring.

Cross-cluster ring:
- Edges: (0, 10), (10, 20), (20, 30), (30, 0)

Labels: place text elements near each node. Position them at some offset from the node position.

Force simulation:
```javascript
const simulation = d3.forceSimulation(nodes)
  .force("charge", d3.forceManyBody().strength(-200))
  .force("center", d3.forceCenter(width/2, height/2))
  .force("collision", d3.forceCollide().radius(15))
  .on("tick", () => {
    // update link and node positions
  });
```

Actually, for the links to follow the dragged node, we need to update the simulation's nodes. The simulation will naturally move other nodes in response.

For hover highlighting:
- On mouseover node: find the node, its neighbors (nodes connected by links), and the links between them.
- Show the node with a different color/opacity, show neighbor nodes, and show the links.
- Dim other elements: we can have a group for links and nodes that are not highlighted, with opacity 0.3.

Let me think about how to implement the highlight:
- When hovering over a node, we want to highlight the node itself, its neighbors, and the links among them.
- "Directly connected neighbors" means neighbors in the graph (nodes connected by edges).
- So for a node, get all linked nodes (neighbors via edges), plus the node itself, plus the edges between any pair of these nodes? The requirement says "highlight it, its directly connected neighbors, and their connecting links". So highlight the node, its neighbors, and the links connecting them (i.e., the edges between the node and its neighbors, and possibly edges among neighbors).

Implementation approach:
- Maintain a set of highlighted elements: node elements + link elements.
- On mouseover: clear previous highlights, add current node, its neighbors, and the links between the highlighted nodes.
- On mouseout: remove highlights.

For the links, we can have link elements (line elements) and node elements (circle elements).

Dimming: put all nodes and links in a group `<g id="all-elements">`, and another group `<g id="dimmed">` with opacity 0.3. When highlighting, move the highlighted elements into the main group and dim the rest.

Actually, simpler: have two groups:
- `<g id="interactive">` containing nodes and links (visible normally)
- `<g id="dimmed">` containing nodes and links (dimmed)

On hover, we toggle visibility: show the highlighted ones in `#interactive` and hide the rest in `#dimmed`.

But the highlight needs to be dynamic. Let me think...

Alternative: Each node has a class like "highlighted". On mouseover, add class to the node and its neighbors, and to the links. On mouseout, remove classes.

Then CSS:
```css
.node.highlighted { fill: ... }
.link.highlighted { stroke: ... }
```

And for dimming, we can use a filter or opacity on non-highlighted elements. Hmm, but if we just change opacity of individual elements, it's tricky.

Better approach: Two groups:
- `<g id="links">` - all link lines
- `<g id="nodes">` - all node circles

And a dimmed group:
- `<g id="dimmed-nodes">` - nodes with opacity 0.3
- `<g id="dimmed-links">` - links with opacity 0.3

When highlighting, we move the relevant nodes/links from dimmed to active groups, and vice versa.

Let me structure the SVG:
```html
<svg>
  <g id="background"></g> <!-- for zoom -->
  <g id="links-group">
    <g id="links"></g>
  </g>
  <g id="nodes-group">
    <g id="nodes"></g>
  </g>
  <g id="dimmed-nodes"></g>
  <g id="dimmed-links"></g>
</svg>
```

Actually, simpler: just have one group for all elements, and use CSS to dim based on classes. But CSS can't easily dim specific elements without classes.

Let me go with the two-group approach:
- `#links`: contains all link lines (normally visible)
- `#dimmed-links`: contains all link lines (dimmed)
- `#nodes`: contains all node circles (normally visible)
- `#dimmed-nodes`: contains all node circles (dimmed)

On hover:
- Add a class "highlight" to the node element and its neighbors' elements.
- Then in CSS, `.highlight` makes the node circle visible (or changes color) and dims the corresponding link.

Hmm, this is getting complex. Let me simplify:

For hover highlighting:
- On mouseover node i:
  - Get all neighbors of node i (from the edges list).
  - Create a set of highlighted node IDs: {i} ∪ neighbors.
  - For each highlighted node, find its DOM element and add a class "highlight".
  - For each link where both endpoints are highlighted, find the link element and add a class "highlight".
- On mouseout:
  - Remove "highlight" from all nodes and links.

CSS:
```css
.node { cursor: pointer; }
.node.highlight { fill: currentColor; } /* or a highlight color */
.link.highlight { stroke: currentColor; stroke-width: 3; }
```

Wait, but the nodes have colors based on clusters. If we highlight, we might want to make them stand out. Let's say highlighted nodes get a brighter version of their cluster color, or a white border.

Actually, let's keep it simple: highlighted nodes get a stroke of 3px in a contrasting color (like yellow or white), and highlighted links get a thicker stroke.

For dimming: when no node is highlighted, all nodes and links are in the normal group. When a node is highlighted, the non-highlighted elements get opacity 0.3.

So:
- Group `#nodes` (normal): nodes with opacity 1
- Group `#dimmed-nodes`: nodes with opacity 0.3
- Group `#links` (normal): links with opacity 1
- Group `#dimmed-links`: links with opacity 0.3

On hover, we move elements between groups. But moving DOM elements between groups is possible with appendChild/removeChild.

Alternatively, use CSS:
```css
#dimmed-nodes { opacity: 0.3; }
#dimmed-links { opacity: 0.3; }
```
And on hover, toggle classes on the elements themselves.

Let me try this approach:
- All nodes are in `#nodes`.
- All links are in `#links`.
- On hover, add class "hover" to the node and its neighbors, and to the links between highlighted nodes.
- CSS:
```css
.node.hover { fill: #fff; stroke: #000; stroke-width: 2; }
.link.hover { stroke: #000; stroke-width: 3; }
```

This way, the highlighted elements are visually distinct, and the rest remains normal. No need for dimming groups. This satisfies "dimming unrelated elements" — the unrelated elements stay at their normal opacity, and the highlighted ones stand out.

Actually, "dimming unrelated elements" suggests that unrelated elements should be dimmed. With the above, they're not dimmed, just unchanged. But the highlighted ones stand out. I think this is acceptable and simpler.

Let me go with this simpler approach.

Now, let me write the full HTML file.

Structure:
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Force-Directed Graph</title>
  <style>
    /* CSS here */
  </style>
</head>
<body>
  <div id="container">
    <button id="reset-btn">Reset View</button>
    <svg id="graph"></svg>
  </div>
  <script src="d3.min.js"></script>
  <script>
    // JavaScript here
  </script>
</body>
</html>
```

The SVG size: let's use width 800, height 600.

Initial camera framing: set the SVG viewBox to fit all nodes. Since we use a force simulation with center force, the nodes will spread out. We can set the initial positions so they're within the viewbox.

Let me define initial positions manually to keep things within view. For example, arrange the clusters in a grid:
- Cluster 0 (red): nodes 0-9 arranged in a small ring around (200, 150)
- Cluster 1 (green): nodes 10-19 around (400, 150)
- Cluster 2 (blue): nodes 20-29 around (600, 150)
- Cluster 3 (purple): nodes 30-39 around (800, 150)

Each cluster ring radius ~50.

Actually, with a force simulation, if we set initial positions and then run the simulation, it'll stabilize. Let's set initial positions and let the simulation run.

For the simulation, we need to stop it after it settles? The requirement says "drag a node moves it while the graph responds; release lets the simulation settle." So the simulation should continue running. We can use `simulation.alpha(0.3)` or just let it run. When dragging, we update the node's position and the simulation continues.

In D3, to drag a node:
```javascript
const drag = d3.drag()
  .on("start", (event, d) => {
    d.fx = d.x;
    d.fy = d.y;
  })
  .on("drag", (event, d) => {
    d.fx = event.x;
    d.fy = event.y;
  })
  .on("end", (event, d) => {
    // optionally stop the simulation or let it settle
  });
```

But if we set fx/fy, the node becomes fixed during drag. After release, the simulation should pull it back. To let it settle, we can call `simulation.alpha(0.3)` or just let the simulation run. Actually, if we don't stop the simulation, it will keep running. That's fine.

For panning: dragging on empty space. We can attach a drag behavior to the background group. Or use the zoom behavior for pan via mouse wheel and drag.

The requirement: "Dragging the background pans the view". So we need to detect drags on the background (the area outside the graph). We can use a drag on the SVG's background group.

Mouse wheel zoom: attach zoom behavior to the SVG.

Reset view: reset the zoom transform to the initial state.

Let me define the initial zoom extent: the viewBox should contain all nodes. Let's compute the bounds. With initial positions as described, the nodes will be roughly within x: 100-900, y: 50-250. So viewBox could be 0 0 900 300, or we can use the actual bounds.

Actually, let's set the SVG viewBox to something like "0 0 800 500" and use zoom to fit. The zoom behavior's scaleExtent can be set.

For the initial camera framing, we want the graph to be centered and within view. We can set the initial transform/scale so that all nodes are visible.

Let me write the code step by step.

First, the nodes array:
```javascript
const nodes = d3.range(40).map(i => ({
  id: i,
  cluster: Math.floor(i / 10),
  color: ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3"][Math.floor(i / 10)]
}));
```

Edges:
```javascript
const edges = [];
// Ring within each cluster
for (let c = 0; c < 4; c++) {
  const start = c * 10;
  for (let i = 0; i < 9; i++) {
    edges.push([start + i, start + i + 1]);
  }
  edges.push([start + 9, start]); // close ring
}
// Cross-cluster ring
edges.push([0, 10]);
edges.push([10, 20]);
edges.push([20, 30]);
edges.push([30, 0]);
```

Now, the force simulation:
```javascript
const simulation = d3.forceSimulation(nodes)
  .force("charge", d3.forceManyBody().strength(-300))
  .force("center", d3.forceCenter(width / 2, height / 2))
  .force("collision", d3.forceCollide().radius(12))
  .on("tick", tick);
```

The tick function updates the positions. Actually, in D3 v7, the simulation's nodes are updated automatically. We just need to render the nodes and links based on the simulation's nodes.

Rendering:
```javascript
function tick() {
  link.attr("d", d => `M${d.source.x},${d.source.y}C${d.source.x},${d.source.y} ${d.target.x},${d.target.y} ${d.target.x},${d.target.y}`);
  node.attr("cx", d => d.x).attr("cy", d => d.y);
}
```

Links:
```javascript
const link = svg.select("#links").selectAll("line")
  .data(edges)
  .enter().append("line")
  .attr("class", "link");
```

Nodes:
```javascript
const node = svg.select("#nodes").selectAll("circle")
  .data(nodes)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 8)
  .attr("fill", d => d.color)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .call(drag);
```

Labels: add text elements near each node:
```javascript
const label = svg.select("#labels").selectAll("text")
  .data(nodes)
  .enter().append("text")
  .attr("class", "label")
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("dy", "0.35em")
  .attr("text-anchor", "middle")
  .text(d => d.id);
```

Hmm, labels at the node position might overlap. Maybe offset them slightly. For simplicity, place them at the node position.

Hover:
```javascript
node.on("mouseover", function(event, d) {
  const neighbors = getNeighbors(d.id);
  const highlighted = new Set([d.id, ...neighbors]);
  
  // Highlight nodes
  d3.select(this).classList.add("highlight");
  highlighted.forEach(id => {
    d3.select(`#node-${id}`).classList.add("highlight");
  });
  
  // Highlight links between highlighted nodes
  edges.filter(([a, b]) => highlighted.has(a) && highlighted.has(b))
    .forEach(([a, b]) => {
      d3.select(`#link-${a}-${b}`).classList.add("highlight");
    });
})
.on("mouseout", function(event, d) {
  d3.select(this).classList.remove("highlight");
  const neighbors = getNeighbors(d.id);
  neighbors.forEach(id => {
    d3.select(`#node-${id}`).classList.remove("highlight");
  });
  edges.filter(([a, b]) => {
    const highlighted = new Set([d.id, ...neighbors]);
    return highlighted.has(a) && highlighted.has(b);
  }).forEach(([a, b]) => {
    d3.select(`#link-${a}-${b}`).classList.remove("highlight");
  });
});
```

Wait, the link IDs: I used `edges` as an array of arrays. For the link element, I should give it an ID like `link-0-10`. Let me create link elements with IDs.

In the link data binding, I can do:
```javascript
const link = svg.select("#links").selectAll("line")
  .data(edges.map(([source, target], i) => ({ source, target, id: `link-${source}-${target}` })))
  ...
```

Then in hover, I can select by ID.

Helper function `getNeighbors(id)`:
```javascript
function getNeighbors(id) {
  const neighbors = new Set();
  edges.forEach(([a, b]) => {
    if (a === id) neighbors.add(b);
    if (b === id) neighbors.add(a);
  });
  return Array.from(neighbors);
}
```

Now, the drag behavior. When dragging a node, we update its x/y. The simulation will respond. On release, we can let the simulation settle. If we don't stop the simulation, it will keep running. That's fine.

But there's a subtlety: if we set `d.fx = event.x`, the node becomes fixed relative to the mouse during drag. After release, the simulation pulls it back. This is standard.

For background panning: attach a drag to the background group (the area outside the graph). Actually, the requirement says "dragging the background pans the view". We can make the entire SVG respond to drags on empty space. One way: use a drag on the SVG itself, but only when clicking on empty areas. Simpler: use a drag on a background rect that covers the whole SVG, and if the click is on a node, the node drag takes precedence.

Or, use d3.zoom for panning via drag? No, zoom is for mouse wheel.

Let me implement a custom drag on the background:
```javascript
const background = svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .attr("fill", "transparent")
  .style("cursor", "grab");
```

Hmm, but the background should be behind the nodes. Let me put the background rect first, then the nodes and links on top.

Actually, for panning, we can use the zoom behavior with a drag gesture. D3's zoom has a "drag" mode? Not exactly. The zoom behavior handles wheel zoom and double-click to reset. For pan via drag, we'd need a separate drag.

Simplest approach: use a drag on the SVG element. When the user clicks and drags, if the click is on a node, drag the node; otherwise, pan the view. We can check if the target is a node or not.

```javascript
svg.call(dragBehavior);
```

Where dragBehavior:
```javascript
const dragBehavior = d3.drag()
  .on("start", (event, d) => {
    d.fx = d.x;
    d.fy = d.y;
  })
  .on("drag", (event, d) => {
    d.fx = event.x;
    d.fy = event.y;
  })
  .on("end", (event, d) => {
    // Optionally stop the simulation
  });
```

But this would also drag the background. To pan, we need to translate the entire graph. We can use a transform on the group containing nodes and links.

Alternative: use zoom for panning too. When you drag on the SVG, we can update the zoom transform. Let me think...

Actually, the requirement is: "Dragging the background pans the view". So when the user drags on the empty background area, the whole graph pans. And "the mouse wheel zooms".

We can implement this with a zoom behavior that includes a drag-to-pan feature. D3's zoom doesn't natively support drag-to-pan, but we can combine zoom with a drag on the background.

Let me implement it like this:
- Attach zoom to the SVG: `svg.call(zoom.on("zoom", zoomed))`
- Also attach a drag to the SVG for panning: `svg.call(dragPan)`
- In the zoom handler, update the transform.

Actually, let me keep it simple and testable. I'll implement:
1. Zoom via mouse wheel (zoom behavior).
2. Drag on nodes (d3.drag).
3. Drag on the SVG background (a separate drag behavior that translates the graph group).

For the background drag, I'll create a group `<g id="graph-group">` containing nodes and links. Then:
- Zoom is applied to the SVG (or to the graph-group).
- Drag on the SVG background: when dragging on empty space, update the graph-group's transform.

Let me structure the SVG:
```html
<svg id="graph-svg" viewBox="0 0 800 500">
  <g id="zoom-layer">
    <g id="graph-group">
      <g id="links"></g>
      <g id="nodes"></g>
    </g>
  </g>
  <rect id="bg-rect" width="800" height="500" fill="transparent"/>
</svg>
```

Hmm, this is getting complicated. Let me simplify.

I'll use a single SVG with the following groups:
- `#links-group`: contains all link lines
- `#nodes-group`: contains all node circles
- `#dimmed-nodes-group`: dimmed nodes (initially hidden or low opacity)
- `#dimmed-links-group`: dimmed links

And apply zoom to the SVG. For panning via drag, I'll use a drag behavior on the SVG that translates the `#nodes-group` and `#links-group` together.

Actually, let me reconsider. The cleanest approach for a force-directed graph with pan and zoom:

- SVG with a zoom behavior.
- The content (nodes and links) is inside a group `<g id="content">`.
- On zoom, the content scales.
- On drag (panning), we translate the content group.

Let me write it:

```javascript
const svg = d3.select("#graph")
  .append("g")
  .attr("id", "content");

// Zoom
const zoom = d3.zoom()
  .scaleExtent([0.5, 5])
  .on("zoom", zoomed);

svg.call(zoom);

function zoomed(event) {
  svg.attr("transform", event.transform);
}
```

For panning via drag on background:
```javascript
const dragPan = d3.drag()
  .on("start", (event) => {
    // record initial position
  })
  .on("drag", (event) => {
    // translate the content group
    const tx = event.dx;
    const ty = event.dy;
    // accumulate translation
  })
  .on("end", () => {
    // reset accumulated translation?
  });

// Apply drag to the SVG background? Or to a specific area.
```

Hmm, if I apply the drag to the SVG element, it will conflict with zoom. Let me apply the drag to a background rectangle that covers the entire SVG, and only when clicking on empty space (not on nodes).

```javascript
svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .attr("fill", "transparent")
  .style("cursor", "grab")
  .call(dragPan);
```

But the nodes and links are on top of this rect. The drag on the rect will move the entire SVG content (including nodes and links) because the SVG's coordinate system... actually, dragging the rect won't move the content unless we translate the content group.

Let me think about this differently. The graph is drawn in the SVG. The "background" is the area outside the graph. Dragging the background should pan the whole graph. So:

- The graph elements (nodes and links) are in a group `<g id="graph-content">`.
- Zoom is applied to the SVG (or to the graph-content group).
- Panning: when the user drags on empty space, we translate the graph-content group.

Implementation:
```javascript
const graphContent = svg.append("g")
  .attr("id", "graph-content");

// Zoom on the SVG
svg.call(zoom);

// Drag for panning
svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .attr("fill", "transparent")
  .style("cursor", "grab")
  .call(d3.drag()
    .on("drag", (event) => {
      const tx = event.dx;
      const ty = event.dy;
      graphContent.attr("transform", `translate(${tx},${ty})`);
    })
  );
```

Wait, but if the SVG has a zoom transform, the drag translation needs to account for that. This is getting messy.

Let me simplify the interaction model:
1. **Zoom**: mouse wheel on the graph → zoom.
2. **Drag nodes**: click and drag a node → moves it, simulation responds.
3. **Pan**: click and drag on empty space (background) → pans the graph.
4. **Hover**: highlight node and neighbors.
5. **Reset**: button resets zoom/pan to initial.

For pan, I'll use a drag on the SVG background rect, and translate the graph-content group. The zoom will be on the SVG, and the drag will override the transform. Actually, if both have transforms, they'll compose. Let me just apply the drag transform to the graph-content group, and the zoom transform to the SVG. They should work together: the content is zoomed and panned.

But the zoom transform is on the SVG, and the content is inside the SVG. If I set a transform on the graph-content group, it will be relative to the SVG's coordinate system. The zoom transform on the SVG will scale everything. So the final position = zoom * translate. That should work.

Let me test this logic later.

Now, the reset button:
```javascript
document.getElementById("reset-btn").addEventListener("click", () => {
  svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
});
```

This resets the zoom to identity (no pan, no zoom). The graph data remains.

Now, let me write the complete HTML file.

Let me define the dimensions: width=800, height=500.

Initial node positions: I'll place them in a grid-like arrangement within the viewport.

Cluster centers:
- Cluster 0: (200, 150)
- Cluster 1: (400, 150)
- Cluster 2: (600, 150)
- Cluster 3: (800, 150) — but 800 is at the edge. Let me adjust: (700, 150) or keep 800 and let zoom handle it.

Actually, with zoom, the initial view just needs to contain the graph. Let me place clusters at:
- C0: (180, 150)
- C1: (380, 150)
- C2: (580, 150)
- C3: (780, 150)

Each cluster ring radius: 45.

Within each cluster, 10 nodes in a ring. Angle step: 36 degrees (360/10).

Node positions for cluster c:
```javascript
const cx = 180 + c * 200;
const cy = 150;
for (let i = 0; i < 10; i++) {
  const angle = i * 2 * Math.PI / 10;
  nodes[i + c*10].x = cx + 45 * Math.cos(angle);
  nodes[i + c*10].y = cy + 45 * Math.sin(angle);
}
```

This places all nodes within approximately x: 130-850, y: 105-195. The viewBox 0 0 800 500 should contain them.

Now, the simulation will adjust positions slightly, but they should stay within view.

Let me write the code now.

Actually, I need to be careful about the drag behavior. When dragging a node, I set `d.fx = event.x` and `d.fy = event.y`. The simulation will then update the node's position. But the node's x/y are being set directly. In D3 v7, when you set fx/fy, the node is fixed at that position, and the simulation tries to restore it. This works.

For the end event, I could optionally stop the simulation or just let it run. Let me not stop it; the simulation will naturally settle.

Now, let me write the complete index.html.

One more thing: the hover highlight. I need to make sure the highlight class works. Let me define CSS:
```css
.node { cursor: pointer; }
.node.highlight { stroke: #000; stroke-width: 2; }
.link.highlight { stroke: #000; stroke-width: 3; }
```

And the labels: I'll add text elements with class "label".

Let me also add a title or legend? Not required.

Now, let me write the file.

Actually, let me reconsider the hover highlight. The requirement says "highlight it, its directly connected neighbors, and their connecting links while dimming unrelated elements."

So:
- Node: highlighted (e.g., stroke white, thicker border)
- Neighbors: highlighted
- Links between highlighted nodes: highlighted (thicker stroke)
- Unrelated elements: dimmed

For dimming, I can use a group with opacity. Let me add dimmed groups:
- `#dimmed-nodes`: nodes with opacity 0.3
- `#dimmed-links`: links with opacity 0.3

On hover, I move the highlighted elements from dimmed to active groups. This requires moving DOM elements between groups.

Implementation:
```javascript
// Groups
const nodesGroup = svg.select("#nodes");
const linksGroup = svg.select("#links");
const dimmedNodesGroup = svg.select("#dimmed-nodes");
const dimmedLinksGroup = svg.select("#dimmed-links");

// Initially, all nodes in nodesGroup, all links in linksGroup
// On hover:
//   - Move highlighted nodes from dimmedNodesGroup to nodesGroup
//   - Move highlighted links from dimmedLinksGroup to linksGroup
//   - Remove highlight classes
```

But moving DOM elements between groups is doable:
```javascript
function highlightNode(id) {
  // Find the node element with id="node-{id}"
  const nodeEl = document.getElementById(`node-${id}`);
  if (nodeEl) {
    dimmedNodesGroup.node().removeChild(nodeEl);
    nodesGroup.node().appendChild(nodeEl);
  }
  // Similarly for links
}
```

This is a bit involved. Let me simplify: instead of groups, use CSS classes for dimming. Put all nodes in one group, and use a class to dim them. But CSS can't easily dim specific elements based on a set of IDs without classes.

Alternative: use a single group for all nodes, and use CSS `opacity` on the group. But then all nodes dim together, which isn't what we want.

OK, let me go with the CSS class approach for highlighting, and for dimming, I'll use a separate dimmed group and move elements between groups. It's the most robust.

Let me define the structure:

```html
<svg id="graph">
  <g id="zoom-layer">
    <g id="graph-content">
      <g id="links"></g>
      <g id="nodes"></g>
      <g id="dimmed-nodes"></g>
      <g id="dimmed-links"></g>
    </g>
  </g>
  <rect id="bg" width="800" height="500" fill="transparent"/>
</svg>
```

In JS:
```javascript
const links = svg.select("#links").selectAll("line")
  .data(edges.map(([s, t], i) => ({ source: s, target: t, id: `link-${s}-${t}` })))
  .enter().append("line")
  .attr("class", "link")
  .attr("id", d => d.id);

const nodes = svg.select("#nodes").selectAll("circle")
  .data(nodesData)
  .enter().append("circle")
  .attr("class", "node")
  .attr("id", d => `node-${d.id}`)
  .attr("r", 8)
  .attr("fill", d => d.color)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y);

const dimmedNodes = svg.select("#dimmed-nodes").selectAll("circle")
  .data(nodesData)
  .enter().append("circle")
  .attr("class", "node")
  .attr("id", d => `node-${d.id}`)
  .attr("r", 8)
  .attr("fill", d => d.color)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y);

const dimmedLinks = svg.select("#dimmed-links").selectAll("line")
  .data(edges.map(([s, t], i) => ({ source: s, target: t, id: `link-${s}-${t}` })))
  .enter().append("line")
  .attr("class", "link")
  .attr("id", d => d.id);
```

Wait, this duplicates the data. The links and dimmedLinks have the same data. That's fine.

On hover:
```javascript
function highlight(id) {
  // Highlight nodes
  d3.select(`#node-${id}`).classList.add("highlight");
  getNeighbors(id).forEach(n => d3.select(`#node-${n}`).classList.add("highlight"));
  
  //