Open In App

D3.js | Path.rect() Function

Improve
Improve
Like Article
Like
Save
Share
Report

D3.js is a library in Javascript, this library is mostly used for making of graph and visualizing data on the HTML SVG elements. D3 stands for Data Driven Documents and mostly used for data visualization. The Path.rect() is used to make a rectangle in a svg element.

Syntax:

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

Parameters: This function accepts four parameter as mentioned above and described below:

  • X: It is the x-position of the rectangle.
  • Y: It is the y-position of the rectangle.
  • W: It is the width of the rectangle.
  • H: It is the height of the rectangle

Below example illustrate function in D3.js

Example 1:

Javascript




<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" 
            path1tent="width=device-width, 
                       initial-scale=1.0">
      <title>D3.js | Path.rect() function</title>
   </head>
   <style>
      h1 {
          color: green;
      }
      body {
          text-align: center;
      }
      svg{
      background-color: green;
      }
      .path1{
      fill: aliceblue;
      }
   </style>
   <body>
      <div>
         <h1>GeeksforGeeks</h1>
         <b>D3.js | Path.rect() function</b>
         <br>
         <svg width="400" height="300">
            <text x="50" y="50" font-family="Verdana" 
                  fill="white">
                SVG Element
            </text>
            <path class="path1">
         </svg>
      </div>
      <script src =
      </script>
      <script>
         // 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);
      </script>
   </body>
</html>


Output:

Example 2:

Javascript




<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" 
            path1tent="width=device-width, 
                       initial-scale=1.0">
      <title>D3.js | Path.rect() function</title>
   </head>
   <style>
      h1 {
          color: green;
      }
      body {
          text-align: center;
      }
      svg{
      background-color: green;
      }
      .path1{
      fill: aliceblue;
      }
   </style>
   <body>
      <div>
         <h1>GeeksforGeeks</h1>
         <b>D3.js | Path.rect() function</b>
         <br>
         <svg width="400" height="300">
            <text x="50" y="50" font-family="Verdana" 
                  fill="white">
                SVG Element
            </text>
            <path class="path1">
         </svg>
      </div>
      <script src =
      </script>
      <script>
         // 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);
      </script>
   </body>
</html>


Output:



Last Updated : 16 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads