Skip to content

Instantly share code, notes, and snippets.

@d3indepth
Last active July 17, 2018 13:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save d3indepth/9d9f03a0016bc9df0f13b0d52978c02f to your computer and use it in GitHub Desktop.
Save d3indepth/9d9f03a0016bc9df0f13b0d52978c02f to your computer and use it in GitHub Desktop.
Force layout (with collision detection)
license: gpl-3.0
height: 420
border: no
<!-- <!DOCTYPE html> -->
<meta charset="utf-8">
<head>
<title>Force layout (with collision detection)</title>
</head>
<style>
circle {
fill: orange;
}
</style>
<body>
<div id="content">
<svg width="400" height="400">
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var width = 400, height = 400
var numNodes = 100
var nodes = d3.range(numNodes).map(function(d) {
return {radius: Math.random() * 25}
})
var simulation = d3.forceSimulation(nodes)
.force('charge', d3.forceManyBody().strength(5))
.force('center', d3.forceCenter(width / 2, height / 2))
.force('collision', d3.forceCollide().radius(function(d) {
return d.radius
}))
.on('tick', ticked);
function ticked() {
var u = d3.select('svg')
.selectAll('circle')
.data(nodes)
u.enter()
.append('circle')
.attr('r', function(d) {
return d.radius
})
.merge(u)
.attr('cx', function(d) {
return d.x
})
.attr('cy', function(d) {
return d.y
})
u.exit().remove()
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment