D3.js zoom.clickDistance() Function
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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output: