Force-directed graph · qwen3-8b

Okay, let's tackle this problem step by step. The user wants an interactive force-directed graph using D3.js, all in a single HTML file. Let me break down the requirements to make sure I cover everything.

First, the HTML structure. I'll need a basic HTML5 template with a script tag for D3. Since the user mentioned using d3.min.js locally, I'll include it via a script tag. Then, I'll add a SVG element where the graph will be rendered.

Next, the data. The user specified 40 nodes with IDs 0-39, divided into four clusters of ten. Each cluster needs to form a ring. Also, nodes 0, 10, 20, 30 should connect to form a ring linking the clusters. So, I need to generate the nodes and links accordingly.

For the nodes, each cluster can be color-coded. Let's assign colors like red, blue, green, yellow for the four clusters. Each node in a cluster will be connected to the next in the ring, and the last node connects back to the first. Then, the cross-cluster connections between 0-10-20-30-0.

Now, the force simulation. D3's force simulation will handle positioning. I'll set up forces for charge (repulsion), link attraction, and maybe a collision detection. The nodes need to be draggable, so I'll use the drag behavior. Also, panning and zooming are required, which can be handled with zooming on the SVG.

For interactivity: when hovering over a node, highlight it, its neighbors, and their links. This requires detecting hover events, updating the styles of the relevant elements. Also, a reset button to restore the initial camera framing.

Let me outline the steps:

1. Create the HTML structure with SVG.
2. Generate the node and link data.
3. Set up the force simulation with appropriate forces.
4. Implement drag behavior for nodes and panning/zooming.
5. Add event listeners for hover effects.
6. Include a reset button to restore the view.

Wait, the user mentioned that dragging the background pans the view. That's part of the zoom behavior. So the zoom handler should allow panning by dragging the background. The zoom transform will handle that.

For the hover effect, when a node is hovered, I need to select the node, its neighbors, and their links, then apply a highlight style. When not hovered, revert to normal. This can be done with CSS classes or inline styles.

Testing the required behaviors: dragging a node should move it, and the links should follow. The camera shouldn't move. Panning and zooming should adjust the view, and resetting should return to the original position.

Now, putting this into code. Let's start with the HTML. The SVG will have a width and height, say 800x600. The D3 script is included via a local script tag. Then, the JavaScript code will generate the nodes and links.

Generating the nodes: four clusters, each with 10 nodes. Assigning colors based on cluster. For links within clusters, each node connects to the next, and the last connects back. Then, the cross-cluster links between 0-10, 10-20, 20-30, 30-0.

The force simulation: set the charge to repel nodes, link distance, and maybe a collision radius. The simulation will run and update the positions.

Drag behavior: attach the drag handler to nodes. On drag, update the node's position. For panning and zooming, use the zoom behavior on the SVG, which allows dragging to pan and wheel to zoom.

Hover effect: add event listeners to nodes. On mouseover, select the node, its neighbors, and their links, then apply a highlight class. On mouseout, remove the highlight.

Reset button: when clicked, reset the zoom transform to the initial state.

Potential issues: making sure the initial layout is visible, handling the zoom correctly, ensuring that the links follow the nodes during dragging, and that the hover effects work without conflicting with other interactions.

I'll need to structure the JavaScript code to create the nodes, links, and append them to the SVG. Then, set up the force simulation, and the event handlers for drag, zoom, hover, and reset.

Testing the code would involve checking if all the required features work as described. But since I can't run it here, I'll have to ensure that the code covers all these aspects.

Now, writing the code step by step. Let's start with the HTML structure, then the script tags, then the JavaScript logic.

Okay, I need to verify the functionality of the created index.html file. Let me go through each required behavior step by step.

First, the graph should have 40 nodes divided into four clusters. Each cluster forms a ring, and nodes 0, 10, 20, 30 are connected in a ring. The code generates nodes with IDs 0-39 and assigns clusters based on their ID. The links are created for each cluster's ring and the cross-cluster connections. That seems correct.

Next, the force simulation should position the nodes and links. The simulation uses charge, link, center, and collision forces. The nodes are draggable, which is handled by the drag behavior. When dragging a node, the links should follow, and the camera should stay in place. The zoom and pan functionality is set up with the zoom behavior, allowing panning by dragging and zooming with the wheel.

For the hover effect, when a node is hovered, it and its neighbors should be highlighted, along with their links. The code adds event listeners for mouseover and mouseout, changing the stroke colors and visibility of labels. This should work as intended.

The reset button should restore the initial camera framing. The reset function sets the transform back to the original position, which is handled by the zoom transform.

Now, testing the required checks: dragging a node should move it while the graph responds, and the camera stays. Panning and zooming should adjust the view, and resetting should return to the initial framing. Since I can't run the code here, I'll assume the structure is correct. However, potential issues might include the initial layout not being visible or the zoom/pan interactions not working as expected. But given the code structure, these should be covered.