Built with blockbuilder.org
forked from john-guerra's block: D3 Force Simulation
license: mit |
Built with blockbuilder.org
forked from john-guerra's block: D3 Force Simulation
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<style> | |
</style> | |
</head> | |
<body> | |
<h1>Force Directed layout</h1> | |
<svg | |
width=400 | |
height=400 | |
id="network"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
let svg = d3.select("#network"), | |
width = +svg.attr("width"), | |
height = + svg.attr("height"); | |
let nodes = d3.range(100).map(() => { | |
return { | |
x: Math.random()*width, | |
y: Math.random()*height | |
}; | |
}); | |
let links = d3.range(100).map(() => { | |
return { | |
source:Math.floor(Math.random()*100), | |
target:Math.floor(Math.random()*100) | |
} | |
}) | |
svg.selectAll(".node") | |
.data(nodes) | |
.enter() | |
.append("circle") | |
.attr("class", "node") | |
.attr("cx", (d) => d.x) | |
.attr("cy", (d) => d.y) | |
.style("fill", "steelblue") | |
.attr("r", 3.5) | |
</script> | |
</body> |