D3.js zoom.clickDistance() Function

Last Updated : 09 Sep, 2020

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 src="https://d3js.org/d3.v4.min.js">  
    </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 src="https://d3js.org/d3.v4.min.js">  
    </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:

My Personal Notes

Related Articles