d3.js zoom.clickDistance()用法及代码示例

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

用法:

zoom.clickDistance([distance])

参数：该函数接受如上所述和以下描述的单个参数

distance:此参数是最大距离。

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

以下示例程序旨在说明D3.js中的zoom.clickDistance()函数

范例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>

输出：

范例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>

输出：

相关用法

注：本文由纯净天空筛选整理自SHUBHAMSINGH10大神的英文原创作品 D3.js zoom.clickDistance() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。