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.

Solution 1

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"]

Solution 2

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>

Comments

[jshanley]

You can also use d3.svg.symbolTypes to return an array of the types supported in your version of d3.

[Cute_Ninja]

Cool, thanks :) I was wondering if there are more symbol types available or just these 6? :(

[Ishan]

Can you explain, how does this 2 lines work ? ` .attr('transform',function(d,i) { return 'translate('+(i*20+20)+','+30+')';}) .attr('d', d3.symbol().type( function(d,i) { return d3.symbols[i];}) );`

[Andrew Reid]

When you see function(d,i) in a selection like this, you are accessing the datum and increment associated with each element in the selection. So in the first line, the symbol is positioned 30 pixels down, and i*20+20 pixel from the left. The second line returns a d3 symbol type, as d3.symbols is an array, we can use the increment to select a specific symbol.

[Ishan]

Actually I'm only trying to create one symbol Is this the right way to do ? var svg = d3.select('svg').attr('width',400).attr('height',200); svg.append('path') .attr('transform','translate(50,80)') .attr('d', d3.symbol().type( function(d) { return d3.symbols[2];}) ) and also, I'm trying to create drag & drop on symbol can you help me with the approach?

[Andrew Reid]

Yes, though d3.select('body').append('svg') might be what you are intending. As for drag and drop, that's too much for a comment and too different from the question to be added to the answer. It might already exist as a question, or it needs to be asked as one.

[Ishan]

can you answer this question ?

[Marc Maxmeister]

+1 this demonstration is so much simpler as a bare bones example than the official D3 Symbol documentation for generating symbols

[T3db0t]

This is no longer the correct answer. @Andrew Reid's is.