<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</script>
<style>
circle {
opacity: 0.7;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | zoom.clickDistance() Function</h3>
<svg></svg>
<script>
var radius = 15;
var svg = d3.select('svg');
var dimension = document.body
.getBoundingClientRect();
var data = d3.range(0, 50).map(function () {
return {
x: getRandom(radius, 400 - radius),
y: getRandom(radius, 200 - radius)
}
});
var zoom = d3.zoom()
.clickDistance(4)
.on('zoom', function() {
canvas.attr('transform', d3.event.transform);
})
var canvas = svg.attr('width', 400)
.attr('height', 200)
.call(zoom)
.insert('g', ':first-child');
canvas.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('r', radius)
.attr('cx', function(d) {
return d.x;})
.attr('cy', function(d) {
return d.y;})
.style('fill', function() {
return d3.schemeCategory10[getRandom(0, 9)]
});
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(
Math.random() * (max - min + 1)) + min;
}
</script>
</center>
</body>
</html>