List of d3 symbols available to us

Question

Where can I find the list of symbols made available to us by d3.js which is referred by this line of code:

 d3.svg.symbol().type(/*Name of the symbol type that is available to us to use*/'triangle')

Some of the available symbols include triangle, diamond. Is there any documentation available anywhere where the entire list is documented.

Answer 1

For version 4, there are seven shapes, as opposed to the six in version 3 (referenced in the other answer).

The shapes are contained in the array d3.symbols which contains:

• d3.symbolCircle
• d3.symbolCross
• d3.symbolDiamond
• d3.symbolSquare
• d3.symbolStar (new in version 4)
• d3.symbolTriangle (there is only one triangle in v 4, compared to 2 in v3)
• d3.symbolWye (a 'y' shaped symbol, new in version 4)

The d3 documentation as usual covers the topic well here.

To show the symbols, and to show how the array can be used to set shapes dynamically, I've attached a snippet below:

var data = [0,1,2,3,4,5,6];
var svg = d3.select('body').append('svg').attr('width',400).attr('height',200);

svg.selectAll('.symbol')
   .data(data)
   .enter()
   .append('path')
   .attr('transform',function(d,i) { return 'translate('+(i*20+20)+','+30+')';})
   .attr('d', d3.symbol().type( function(d,i) { return d3.symbols[i];}) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js"></script>

Answer 2

The types supported are listed in the D3 documentation: https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_type. To quote:

• circle - a circle.
• cross - a Greek cross or plus sign.
• diamond - a rhombus.
• square - an axis-aligned square.
• triangle-down - a downward-pointing equilateral triangle.
• triangle-up - an upward-pointing equilateral triangle.

D3 also has an object that stores the symbols available (thanks again, @jshanley). E.g. for D3 3.4.6:

>>> d3.svg.symbolTypes
["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"]