D3.js zoom.clickDistance()函数

D3.js中的zoom.clickDistance()函数用于设置鼠标在 mousedown 和 mouseup 之间可以移动的最大距离，这将触发后续的单击事件。

句法：

zoom.clickDistance([distance])

参数：此函数接受如上所述和如下所述的单个参数

• distance：这个参数是最大距离。

返回值：此函数返回缩放行为。

下面的程序说明了D3.js中的zoom.clickDistance()函数

示例 1：

 
 
 
    
     
    
      
    
        circle {
          opacity: 0.7;
        }
    
     
 
    
 
    
         
            Geeksforgeeks 
         
      
        D3.js | zoom.clickDistance() Function
          
        
          
        
            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;
            }
         
    
 
  
 

输出：

示例 2：

 
 
 
    
     
    
      
    
        circle {
          opacity: 0.7;
          fill: #e854c8;
        }
    
     
 
    
 
    
         
            Geeksforgeeks 
         
      
        
D3.js | zoom.clickDistance() Function
        
          
        
          
        
            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);
              }
            };
  
         
    
 
  
 

输出：