Thursday, May 23, 2024
 Popular · Latest · Hot · Upcoming
69
rated 0 times [  72] [ 3]  / answers: 1 / hits: 23876  / 10 Years ago, wed, july 2, 2014, 12:00:00

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.


More From » d3.js

 Answers
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>




[#70343] Monday, June 30, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
geovannil

Total Points: 226
Total Questions: 99
Total Answers: 103

Location: Zimbabwe
Member since Thu, Jul 21, 2022
2 Years ago
;