d3-symbol-extra

Additional D3 symbol types.

For use with D3 version 4+.

Demo

A demo is available here.

Installing

If you use NPM, npm install d3-symbol-extra. Otherwise, download the latest release. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

  <script src="https://d3js.org/d3.v4.min.js"></script> 
  <script src="d3-symbol-extra.js"></script> 
 
  <svg width="100" height="100"></svg>
  <script>
 
  var symbol = d3.symbol().size(1000).type(d3.symbolPentagon);
  d3.select('svg').append('path')
    .attr('transform', 'translate(50, 50)')
    .attr('d', function(d, i) {
      return symbol();
    });
 
  </script> 

API Reference

Symbols

# d3.symbolTriangleDown <>

The triangle symbol type rotated 180°. See d3.symbolTriangle.

# d3.symbolTriangleLeft <>

The triangle symbol type rotated 90° counterclockwise. See d3.symbolTriangle.

# d3.symbolTriangleRight <>

The triangle symbol type rotated 90° clockwise. See d3.symbolTriangle.

# d3.symbolDiamondAlt <>

The diamond symbol type laid horizontally. See d3.symbolDiamond.

# d3.symbolDiamondSquare <>

The square symbol type rotated 45°. See d3.symbolSquare.

# d3.symbolPentagon <>

The pentagon symbol type.

# d3.symbolHexagon <>

The hexagon symbol type.

# d3.symbolHexagonAlt <>

The hexagon symbol type rotated to have horizontal top and bottom edges.

# d3.symbolOctagon <>

The octagon symbol type.

# d3.symbolOctagonAlt <>

The octagon symbol type rotated to have horizontal top and bottom edges.

# d3.symbolX <>

The Greek cross symbol type rotated 45°. Alias: d3.symbolCrossAlt. See d3.symbolCross.