Force-directed graph · qwen3-30b-a3b

Okay, I need to create an interactive force-directed graph using D3.js in a single HTML file. Let's start by outlining the requirements.

First, the HTML structure. I'll need a div for the graph, maybe with an id like "graph". Then, include the D3 library via a script tag. Since the user said to use the provided d3.min.js, I'll assume it's in the same directory and add <script src="d3.min.js"></script>.

Next, the CSS. I'll put it in a <style> tag. The body should have a margin and padding of 0, and the #graph div should take the full window size. Maybe set the background to light gray for contrast.

Now the JavaScript. The main steps are creating nodes and links, setting up the force simulation, and handling interactions.

For the nodes: 40 nodes divided into four clusters of 10. Each cluster's nodes are connected in a ring. Also, nodes 0, 10, 20, 30 form a ring connecting the clusters. So, I need to generate these nodes and links.

Let me think about the clusters. Let's say cluster 0 is 0-9, cluster 1 is 10-19, etc. Each cluster's nodes form a ring. So for each cluster, connect each node to the next, and the last to the first. Then connect 0-10-20-30-0.

For the nodes, each will have an id from 0 to 39. The color can be based on their cluster. Maybe assign a color to each cluster.

The force simulation needs to handle charge, link forces, and maybe centering. The links will be lines between nodes. Nodes will be circles with labels.

For interactions: dragging nodes, panning, zooming. D3's drag behavior can handle node dragging. The zoom behavior for panning and zooming. Also, the reset view button.

Hover effects: when a node is hovered, highlight it, its neighbors, and their links. Dim others. This can be done by adding classes or changing styles on mouseover and mouseout.

The reset view function should reset the zoom and pan to the initial state. Maybe store the initial transform and apply it again.

Let me start coding. First, the HTML structure:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; padding: 0; }
        #graph { width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <div id="graph"></div>
    <script src="d3.min.js"></script>
    <script>
        // JavaScript code here
    </script>
</body>
</html>

Now, the JavaScript. First, create the nodes and links.

Nodes: 40 nodes. Clusters 0-3, each with 10 nodes. Assign colors based on cluster.

Links: For each cluster, connect each node to the next, and the last to the first. Then connect 0-10-20-30.

Let me generate the nodes and links:

const nodes = [];
const links = [];

// Create clusters
for (let cluster = 0; cluster < 4; cluster++) {
    for (let i = 0; i < 10; i++) {
        const id = cluster * 10 + i;
        nodes.push({
            id: id,
            cluster: cluster,
            color: `hsl(${cluster * 60}, 70%, 50%)`
        });
    }
}

// Connect cluster nodes in a ring
for (let cluster = 0; cluster < 4; cluster++) {
    for (let i = 0; i < 10; i++) {
        const current = cluster * 10 + i;
        const next = cluster * 10 + ((i + 1) % 10);
        links.push({ source: current, target: next });
    }
}

// Connect clusters
links.push({ source: 0, target: 10 });
links.push({ source: 10, target: 20 });
links.push({ source: 20, target: 30 });
links.push({ source: 30, target: 0 });

Then, set up the SVG and force simulation.

const width = window.innerWidth;
const height = window.innerHeight;

const svg = d3.select("#graph").append("svg")
    .attr("width", width)
    .attr("height", height);

const link = svg.append("g")
    .attr("stroke", "#999")
    .attr("stroke-width", 2)
    .selectAll("line")
    .data(links)
    .enter()
    .append("line");

const node = svg.append("g")
    .attr("stroke", "#fff")
    .attr("stroke-width", 1.5)
    .selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("r", 10)
    .attr("fill", d => d.color)
    .call(d3.drag()
        .on("start", (event, d) => {
            if (!event.active) simulation.alpha(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;
        })
        .on("drag", (event, d) => {
            d.fx = event.x;
            d.fy = event.y;
        })
        .on("end", (event, d) => {
            if (!event.active) simulation.alpha(0.3).restart();
            d.fx = null;
            d.fy = null;
        })
    );

// Add labels
const label = svg.append("g")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .selectAll("text")
    .data(nodes)
    .enter()
    .append("text")
    .text(d => d.id)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle");

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

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("cx", d => d.x)
        .attr("cy", d => d.y);

    label
        .attr("x", d => d.x)
        .attr("y", d => d.y);
});

// Zoom and pan
const zoom = d3.zoom()
    .scaleExtent([0.5, 4])
    .on("zoom", (event) => {
        svg.attr("transform", event.transform);
    });

svg.call(zoom);

// Reset view
d3.select("body").append("button")
    .text("Reset view")
    .style("position", "absolute")
    .style("top", "10px")
    .style("left", "10px")
    .on("click", () => {
        svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
    });

// Hover effects
node.on("mouseover", (event, d) => {
    // Highlight node and neighbors
    node.style("opacity", 0.3);
    link.style("opacity", 0.3);
    d3.select(event.currentTarget).style("opacity", 1);
    link.filter(l => l.source === d || l.target === d).style("opacity", 1);
}).on("mouseout", (event, d) => {
    node.style("opacity", 1);
    link.style("opacity", 1);
});

But wait, the hover effect might not be perfect. Also, the initial positioning might need adjustment. Maybe the force simulation's initial positions are not ideal. Also, the labels might be overlapping. Maybe adjust the label's position slightly or use a different font size.

Testing the code, but since I can't run it, I need to make sure all parts are correctly implemented. Also, the reset button is added to the body. The zoom and pan are handled via D3's zoom behavior.

Another thing: the initial view might not be centered properly. The force center is set to the middle of the SVG, which should be okay.

Potential issues: The links might not be correctly connected. For example, the cluster rings and the cross-cluster links. Also, the node IDs are from 0-39, which should be correct.

I think this covers the requirements. Now, I need to write this into index.html using the write function.

Okay, I need to check if the index.html file I created meets all the user's requirements. Let me go through each part step by step.

First, the HTML structure: The file starts with a proper DOCTYPE and includes a style section for CSS, a div with id "graph", the D3 script, and a script tag for the JavaScript. That looks good.

The CSS defines styles for the body, #graph, text elements, and classes for highlighting and dimming. The text styling is correct for labels. The highlight and dim classes are set up to adjust opacity, which should work for the hover effects.

In the JavaScript section, the nodes and links are created as specified. There are 40 nodes divided into four clusters of 10, each with a different color. The clusters are connected in rings, and the hubs (0, 10, 20, 30) form a ring. That seems correct.

The SVG setup includes lines for links, circles for nodes, and text labels. The force simulation is configured with link, charge, and center forces. The tick function updates the positions of links, nodes, and labels. That's all there.

Drag behavior is added to nodes using d3.drag(), which allows moving nodes and letting the simulation settle. The zoom behavior is implemented with D3's zoom, allowing panning and zooming. The reset button is present and should reset the view.

The hover effects use mouseover and mouseout events to apply the highlight and dim classes, which should make the selected node, its neighbors, and links stand out. The classes are defined in the CSS to adjust opacity.

I should verify if all the required elements are there. The user mentioned four clusters, which are created. The ring connections within clusters and between hubs are in place. The simulation, drag, zoom, and reset functions are implemented.

Potential issues to check: Are the links correctly formed? The code for connecting cluster nodes in rings and the cross-cluster hubs seems correct. The node IDs are 0-39, and the clusters are properly divided.

The initial positioning should be centered due to the forceCenter. The labels are added with text elements, and their positioning is updated in the tick function.

The reset button uses zoom.transform to reset the view, which should work. The hover effects use class toggling, which should be efficient.

I think this covers all the requirements. The code is self-contained, uses inline CSS and JS, and doesn't rely on external resources. The D3 library is included via a local script tag as instructed.