D3.js transform.toString()函数

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

句法：

transform.toString()

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

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

下面的程序说明了D3.js中的transform.toString()函数。

示例 1：

HTML

 
 
 
    
  
     
       
 
      
 
    
         
            Geeksforgeeks 
         
        
        D3.js | transform.toString() Function
            
        
            
        
            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());
            }
   
         
    
 
    

输出：

示例 2：

HTML

 
 
  
 
    
        
     
    
        
    
        circle {
          opacity: 0.7;
          fill: #9a05a3;
        }
    
 
      
 
    
         
            Geeksforgeeks 
         
        
        D3.js | transform.toString() Function
            
        
            
        
            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());
              }
            };
         
    
 
    

输出：