The zoom.clickDistance() Function in D3.js is used to set the maximum distance that the mouse can move between mousedown and mouseup that will trigger a subsequent click event.
Syntax:
zoom.clickDistance([distance])
Parameters: This function accepts a single parameter as mentioned above and described below
- distance: This parameter is the maximum distance.
Return Value: This function returns the zoom behaviour.
Below programs illustrate the zoom.clickDistance() function in D3.js
Example 1:
<!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 >
|
Output:
Example 2:
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
</ script >
< style >
circle {
opacity: 0.7;
fill: #e854c8;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color: green;" >
Geeksforgeeks
</ h1 >
< h3 >
D3.js | zoom.clickDistance() Function </ h3 >
< svg ></ svg >
< script >
var transform =
d3.zoomIdentity.translate(100, 0).scale(1); var zoom = d3.zoom().on("zoom", handleZoom);
var svg = d3.select("svg")
.attr('width', 400)
.attr('height', 200)
.style("background", "#0ec924")
.call(zoom)
.call(zoom.transform, transform);
var zoomable = svg
.append("g")
.attr("class", "zoomable")
.attr("transform", transform);
var circles = zoomable.append('circle')
.attr("id", "circles")
.attr("cx", 100)
.attr("cy", 100)
.attr('r', 30);
function handleZoom(){
if (zoomable) {
zoomable.attr(
"transform", d3.event.transform);
}
};
</ script >
</ center >
</ body >
</ html >
|
Output: