d3.js transform.toString()用法及代码示例

D3.js中的transform.toString()函数用于获取表示与该变换相对应的SVG变换的字符串。

用法:

transform.toString()

参数：此函数不接受任何参数。

返回值：此函数返回可用于设置缩放行为的字符串值。

以下示例程序旨在说明D3.js中的transform.toString()函数。

范例1：

HTML

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"> 
  
    <script src= 
        "https://d3js.org/d3.v4.min.js">  
    </script>    
</head>  
      
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
        
        <h3>D3.js | transform.toString() Function</h3> 
            
        <svg width="400" height="250"></svg> 
            
        <script> 
            var svg = d3.select("svg"), 
                width = +svg.attr("width"), 
                height = +svg.attr("height"); 
                   
            var radius = 30;     
            var circle = {x:200, y:height /2 } ;  
                   
            var circle = svg.append("circle") 
                .attr("cx", circle.x) 
                .attr("cy", circle.y) 
                .attr("r", radius) 
                .attr("fill", "green"); 
                   
            // Defining zoom behaviour  
            var zoom_handler = d3.zoom() 
                .on("zoom", zoom_actions); 
               
            zoom_handler(circle); 
               
            function zoom_actions(){ 
                var transform = d3.event.transform;  
  
                // Setting attribute using this method 
                this.setAttribute("transform",  
                           transform.toString()); 
            } 
   
        </script>  
    </center> 
</body>  
    
</html>

输出：

范例2：

HTML

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="utf-8"> 
        
    <script src= 
        "https://d3js.org/d3.v4.min.js">  
    </script> 
        
    <style> 
        circle { 
          opacity:0.7; 
          fill:#9a05a3; 
        } 
    </style> 
</head>  
      
<body>  
    <center> 
        <h1 style="color:green;">  
            Geeksforgeeks  
        </h1>  
        
        <h3>D3.js | transform.toString() 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', 300) 
              .attr('height', 250) 
              .style("background", "#31c460") 
              .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", 50) 
              .attr("cy", 125) 
              .attr('r', 30); 
            
            function handleZoom(){ 
              if (zoomable) { 
                // Setting attribute using this method 
                zoomable.attr("transform",  
                    d3.event.transform.toString()); 
              } 
            }; 
        </script>  
    </center> 
</body>  
    
</html>

输出：

相关用法

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