D3.js path.toString() Function

Last Updated : 07 Aug, 2020

The path.toString() function in d3.js is used to return the string representation of the path of the shape drawn. The path representation is according to the SVG’s path data specification.

Syntax:

path.toString()

Parameters: This function does not accept any parameters.

Return Value: This function returns a string.

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width,initial-scale=1.0"> 
  
    <script src= 
        "https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        svg { 
            background-color: #f2f2f2; 
        } 
  
        .path2 { 
            stroke: #000; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <svg width="100" height="100"> 
            <path class="path2"> 
        </svg> 
    </div> 
  
    <script> 
  
        // Creating a path  
        var path = d3.path(); 
        path.moveTo(10, 10); 
        path.bezierCurveTo(95, 10, 50, 90, 10, 10) 
          
        // Printing the string of the path 
        console.log(path.toString()) 
        path.bezierCurveTo(90, 10, 15, 110, 10, 10) 
          
        // Closing the path  
        path.closePath(); 
        d3.select(".path2").attr("d", path);  
    </script> 
</body> 
  
</html> 

Output: Path string for this shape is given in console.

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width, initial-scale=1.0"> 
  
    <script src= 
        "https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <style> 
        h1 { 
            color: green; 
        } 
  
        svg { 
            background-color: #f2f2f2; 
        } 
  
        .path2 { 
            stroke: #000; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <svg width="100" height="100"> 
            <path class="path2"> 
        </svg> 
    </div> 
  
    <script> 
  
        // Creating a path  
        var path = d3.path(); 
        path.moveTo(10, 10); 
          
        // Making line to x:90 and y:10  
        path.lineTo(90, 10); 
          
        // Closing the path  
        path.closePath(); 
        path.moveTo(90, 10); 
        path.lineTo(90, 90); 
          
        // Closing the path  
        path.closePath(); 
        path.moveTo(90, 90); 
        path.lineTo(10, 90); 
          
        // Closing the path  
        path.closePath(); 
        path.moveTo(10, 90); 
        path.lineTo(10, 10); 
          
        // Closing the path  
        path.closePath(); 
          
        // Printing the string of the path 
        console.log(path.toString()) 
        d3.select(".path2").attr("d", path);  
    </script> 
</body> 
  
</html> 

Output: The path string for the square shape is given in the console.

D3.js Paths API Complete Reference

GeeksforGeeks

Improve

Article Tags :

D3.js path.toString() Function

HTML

HTML

Similar Reads

d3-axis

d3-chord

d3-color

d3-interpolate

d3-contour

d3-delaunay

d3-hierarchy

d3-scale

d3-scale-chromatic

Thank You!

What kind of Experience do you want to share?