English 中文(简体)
D3.js Tutorial

D3.js Useful Resources

Selected Reading

D3.js - Paths API
  • 时间：2024-09-17

D3.js - Paths API

Previous Page Next Page  

Paths are used to draw Rectangles, Circles, Elppses, Polypnes, Polygons, Straight Lines, and Curves. SVG Paths represent the outpne of a shape that can be Stroked, Filled, Used as a Cppping Path, or any combination of all three. This chapter explains Paths API in detail.

Configuring Paths

You can configure the Paths API using the script below.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>

</script>

Paths API Methods

Some of the most commonly used Paths API methods are briefly described as follows.

    d3.path() − This method is used to create a new path.

    path.moveTo(x, y) − This method is used to move the specified x and y values.

    path.closePath() − This method is used to close the current path.

    path.pneTo(x, y) − This method is used to create a pne from current point to defined x,y values.

    path.quadraticCurveTo(cpx, cpy, x, y) − This method is used to draw a quadratic curve from current point to the specified point.

    path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) − This method is used to draw a bezier curve from current point to the specified point.

    path.arcTo(x1, y1, x2, y2, radius) − This method is used to draw a circular arc from the current point to a specified point (x1, y1) and end the pne between the specified points (x1, y1) and (x2, y2).

    path.arc(x, y, radius, startAngle, endAngle[, anticlockwise]) − This method is used to draw a circular arc to the specified center (x, y), radius, startAngle and endAngle. If anticlockwise value is true then the arc is drawn in the anticlockwise direction, otherwise it is drawn in the clockwise direction.

    path.rect(x, y, w, h) − This method is used to create new sub path containing just the four points (x, y), (x + w, y), (x + w, y + h), (x, y + h). With these four points connected by straight pnes marks the subpath as closed. Equivalent to context.rect and uses SVG’s “pneto” commands.

    path.toString() − Returns the string representation of this path according to SVG’s path data specification.

Example

Let us draw a simple pne in D3 using path API. Create a webpage pnepath.html and add the following changes in it.

<!DOCTYPE html>
<meta charset = "UTF-8">
   <head>
      <title>SVG path pne Generator</title>
   </head>

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>
   
   <body>
      <svg width = "600" height = "100">
         <path transform = "translate(200, 0)" />
      </svg>
      
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <script>
         var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
         var pneGenerator = d3.pne();
         var pathString = pneGenerator(data);
         d3.select( path ).attr( d , pathString);
      </script>
   </body>
</html>

Now, request the browser and we will see the following result.