D3.js | Path.arc() Function - GeeksforGeeks

22 Jun, 2020
D3.js is mostly used for making of graph and visualizing data on the HTML SVG elements. D3.js has many functions one of which is arc() function. The Path.arc() function is used to make a arc and a circle and other shapes. D3 stands for Data Driven Documents and mostly used for data visualization.
Syntax:
path.arc(x, y, radius, startAngle, endAngle[anticlockwise])

Parameters: This function accepts five parameter as mentioned above and described below:
x: This parameter holds the x-position of the arc in the SVG.
y: This parameter holds the y-position of the arc in the SVG.
radius: This parameter holds the radius of which the arc is to be made.
startAngle: This parameter holds the start angle of the arc.
endAngle[anticlockwise]: This parameter holds the  angle to which the arc is to be made,  if anticlockwise is true, the arc is drawn in the anticlockwise direction.
Note: If the current point is not equal to the starting point of the arc, a straight line is drawn from the current point to the start of the arc.
Below example illustrate the D3.js | Path.arc() Function in D3.js:
Example 1:
HTML
<!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.arc() Function</title>   </head>   <style>      body {          text-align: center;      }      h1 {          color: green;      }      svg{      background-color: green;      }      .path1{      fill: aliceblue;      }   </style>   <body>      <h1>GeeksforGeeks</h1>      <b>D3.js | Path.arc() Function</b>      <div>          <svg width="300" height="300">            <text x="50" y="50" font-family="Verdana"                   font-size="22" fill="white">                SVG Element            </text>            <path class="path1">         </svg>      </div>      <script src = "https://d3js.org/d3.v4.min.js">      </script>      <script>         // Creating path object         var path1= d3.path();                    // Creating arc of radius 100         path1.arc(150,150,100,0,3.14)         d3.select(".path1").attr("d",path1);      </script>   </body></html>
Output:
Example 2:
HTML
<!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.arc() Function</title>   </head>   <style>      body {          text-align: center;      }      h1 {          color: green;      }      svg{      background-color: green;      }      .path1{      fill: aliceblue;      }   </style>   <body>      <h1>GeeksforGeeks</h1>      <b>D3.js | Path.arc() Function</b>      <div>          <svg width="300" height="300">            <text x="40" y="40" font-family="Verdana"                   font-size="22" fill="white">                SVG Element            </text>            <path class="path1">         </svg>      </div>      <script src = "https://d3js.org/d3.v4.min.js">      </script>      <script>         // Creating path object         var path1= d3.path();                    // Creating arc of radius 100         path1.arc(150,150,100,0,2*3.14)         d3.select(".path1").attr("d",path1);      </script>   </body></html>
Output:
D3.js
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request
How to read a local text file using JavaScript?
Node.js | fs.writeFileSync() Method
How to Use the JavaScript Fetch API to Get Data?
How do you run JavaScript script through the Terminal?