Elenco dei simboli D3 a nostra disposizione

Question

Dove posso trovare l'elenco dei simboli messi a nostra disposizione dal d3.js che viene indicato da questa linea di codice:

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

Alcuni dei simboli disponibili includono triangolo, diamante. C'è qualche documentazione disponibile ovunque l'intera lista sia documentata.

Answer 1

I tipi supportati sono elencati nella documentazione D3: https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_type. Per citare:

• cerchio - un circle.
• cross - a Greek cross o segno più.
• diamond - a rhombus.
• quadrato - allineato all'asse square.
• triangolare verso il basso - uno verso il basso equilateral triangle.
• triangolo in alto - un triangolo equilatero rivolto verso l'alto.

D3 ha anche un oggetto che memorizza i simboli disponibili (grazie ancora, @jshanley). Per esempio. per D3 3.4.6:

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

Answer 2

Per la versione 4, vi sono sette forme, in contrapposizione alle sei nella versione 3 (riferimento nel altra risposta).

Le forme sono contenuti nella matrice d3.symbols che contiene:

• d3.symbolCircle
• d3.symbolCross
• d3.symbolDiamond
• d3.symbolSquare
• d3.symbolStar (nuovo nella versione 4)
• d3.symbolTriangle (c'è solo un triangolo v 4, rispetto al 2 in v3)
• d3.symbolWye (simbolo a forma di 'y', di nuovo nella versione 4) documentazione

Il d3 come copertine usuali the topic well here.

Per mostrare i simboli, e di mostrare come l'array può essere utilizzato per impostare le forme in modo dinamico, ho attaccato un frammento di seguito:

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>