Liste der d3 Symbole zur Verfügung zu uns

Question

Wo finde ich die Liste der Symbole zur Verfügung gestellt von d3.js uns finden, die durch diese Zeile Code bezeichnet wird:

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

Einige der verfügbaren Symbole Dreieck umfassen, Diamant. Gibt es irgendwo Dokumentation, wo die gesamte Liste dokumentiert ist?

Answer 1

Die unterstützten Typen sind in der D3-Dokumentation aufgeführt: https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_type. Zu zitieren:

• Kreis - ein circle.
• Kreuz - ein Greek cross oder Pluszeichen.
• Diamant - ein rhombus.
• Quadrat - eine Achse ausgerichtet square.
• Dreieck nach unten - ein nach unten zeigender equilateral triangle.
• Dreieck-up - ein nach oben zeigendes gleichseitiges Dreieck.

D3 hat auch ein Objekt, das die verfügbaren Symbole speichert (nochmals vielen Dank, @jshanley). Z.B. für D3 3.4.6:

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

Answer 2

Für Version 4 gibt es sieben verschiedene Formen, in Bezug auf die sechs in der Version 3 (in der anderen Antwort verwiesen) gegenüber.

Die Formen sind in dem Array d3.symbols enthalten sind, die enthält:

• d3.symbolCircle
• d3.symbolCross
• d3.symbolDiamond
• d3.symbolSquare
• d3.symbolStar (neu in Version 4)
• d3.symbolTriangle (es ist nur ein Dreieck in 4 V, im Vergleich zu 2 in v3)
• d3.symbolWye (a 'y' förmiges Symbol, neu in Version 4)

Die d3 Dokumentation wie üblich Abdeckungen the topic well here.

die Symbole anzuzeigen, und zu zeigen, wie das Array kann Formen verwendet werden, dynamisch zu setzen, habe ich einen Ausschnitt unten angehängt:

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>