Scribd
Upload
53 views2 pages

D3.js Force Simulation Example

This document defines a force-directed graph using D3.js. It creates nodes and links between nodes A, B, C and D. It then generates a force simulation to position the nodes and links on the SVG canvas based on forces like charges and centers. Drag interactions are also implemented to allow dragging of nodes. On each tick of the simulation, the positions of the links and nodes are updated.

Uploaded by

kesen60172
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
53 views2 pages

D3.js Force Simulation Example

This document defines a force-directed graph using D3.js. It creates nodes and links between nodes A, B, C and D. It then generates a force simulation to position the nodes and links on the SVG canvas based on forces like charges and centers. Drag interactions are also implemented to allow dragging of nodes. On each tick of the simulation, the positions of the links and nodes are updated.

Uploaded by

kesen60172
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDEX</title>
</head>
<body>
<script src="[Link]

<script>
var svg = [Link]("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);

// Define the data for the graph


var nodes = [
{ id: "A" },
{ id: "B" },
{ id: "C" },
{ id: "D" },
];

var links = [
{ source: "A", target: "B" },
{ source: "B", target: "C" },
{ source: "C", target: "A" },
];

// Create the force simulation


var simulation = [Link](nodes)
.force("link", [Link](links).id(function(d) { return [Link]; }))
.force("charge", [Link]())
.force("center", [Link](250, 250));

// Create the links


var link = [Link]("line")
.data(links)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);

// Create the nodes


var node = [Link]("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", "steelblue")
.call([Link]()
.on("start", dragStarted)
.on("drag", dragged)
.on("end", dragEnded));

// Add the simulation forces


[Link]("tick", function() {
link
.attr("x1", function(d) { return [Link].x; })
.attr("y1", function(d) { return [Link].y; })
.attr("x2", function(d) { return [Link].x; })
.attr("y2", function(d) { return [Link].y; });

node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});

function dragStarted(event, d) {
if (![Link]) [Link](0.3).restart();
[Link] = d.x;
[Link] = d.y;
}

function dragged(event, d) {
[Link] = event.x;
[Link] = event.y;
}

function dragEnded(event, d) {
if (![Link]) [Link](0);
[Link] = null;
[Link] = null;
}
</script>

</body>
</html>

You might also like