D3.js Symbols symbolDiamond Property

0 0 1 minute read

The d3.symbolDiamond property is a symbol type in D3.js. It is a diamond-shaped symbol type that can be used.

Syntax:

d3.symbolDiamond

Example 1:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
  
    <script src= 
        "https://d3js.org/d3.v5.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="text-align: center; color: green;"> 
        zambiatek 
    </h1> 
  
    <h3 style="text-align: center;"> 
        D3.js | symbolDiamond  
    </h3> 
  
    <center> 
        <svg id="gfg" width="100" height="100"></svg> 
    </center> 
  
    <script> 
        // symbolDiamond 
        var sym = d3.symbol() 
            .type(d3.symbolDiamond).size(500); 
        d3.select("#gfg") 
            .append("path") 
            .attr("d", sym) 
            .attr("fill", "green") 
            .attr("transform", "translate(50,50)"); 
    </script> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
 <html> 
 
 <head> 
     <meta charset="utf-8"> 
 
     <script src= 
         "https://d3js.org/d3.v5.min.js"> 
     </script> 
 </head> 
 
 <body> 
 
     <h1 style="text-align: center; color: green;"> 
         zambiatek 
     </h1> 
 
     <h3 style="text-align: center;"> 
         D3.js | symbolDiamond 
     </h3> 
 
     <center> 
     <svg id="gfg" width="100" height="100"></svg> 
     </center> 
 
     <script> 
         // symbolDiamond  
         var sym = d3.symbol() 
             .type(d3.symbolDiamond).size(500); 
         d3.select("#gfg") 
             .append("path") 
             .attr("d", sym) 
             .attr("fill", "none") 
             .attr("stroke","green") 
             .attr("stroke-width","5px") 
             .attr("transform", "translate(50,50)"); 
     </script> 
 </body> 
 
 </html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!