D3.js | Path.rect()函数

D3.js是 Javascript 中的一个库，该库主要用于制作图形和可视化 HTML SVG 元素上的数据。 D3 代表数据驱动文档，主要用于数据可视化。 Path.rect()用于在 svg 元素中创建一个矩形。

句法：

Path.rect(x, y, w, h);

参数：此函数接受四个参数，如上所述，如下所述：

• X：矩形的x位置。
• Y：矩形的y位置。
• W：矩形的宽度。
• H：矩形的高度

下面的示例说明了 D3.js 中的函数

示例 1：

Javascript

   
      
      
      D3.js | Path.rect() function
   
   
      h1 {
          color: green;
      }
      body {
          text-align: center;
      }
      svg{
      background-color: green;
      }
      .path1{
      fill: aliceblue;
      }
   
   
      
         GeeksforGeeks
         D3.js | Path.rect() function
         
         
            
                SVG Element
            
            
         
      
      
      
      
         // Creating path object
         var path1= d3.path();
           
         // Creating rectangle at x:50 and y:100
         // and height:200, width:300
         path1.rect(50,70,300,200); 
         d3.select(".path1").attr("d",path1);
      
   

输出：

示例 2：

Javascript

   
      
      
      D3.js | Path.rect() function
   
   
      h1 {
          color: green;
      }
      body {
          text-align: center;
      }
      svg{
      background-color: green;
      }
      .path1{
      fill: aliceblue;
      }
   
   
      
         GeeksforGeeks
         D3.js | Path.rect() function
         
         
            
                SVG Element
            
            
         
      
      
      
      
         // Creating path object
         var path1= d3.path();
           
         // Creating rectangle at x:50 and y:100
         // and height:200, width:300
         path1.rect(100, 70, 200, 200); 
         d3.select(".path1").attr("d",path1);
      
   

输出：