我们可用的d3符号列表

Question

我在哪里可以找到d3.js提供给我们的符号列表,这些符号由这行代码引用:

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

一些可用的符号包括三角形,菱形.是否有任何文档可用于记录整个列表的位置.

Answer 1

D3文档中列出了支持的类型:https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_type.报价:

• 圈子 - 一个圆圈.
• 交叉 - 希腊十字架或加号.
• 钻石 - 菱形.
• square - 轴对齐的正方形.
• 三角形向下 - 向下指向的等边三角形.
• 三角形 - 向上指向的等边三角形.

D3还有一个存储符号的对象(再次感谢@jshanley).例如D3 3.4.6:

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

Answer 2

对于版本4,有七种形状,而不是版本3中的六种(在另一个答案中引用).

形状包含在数组中d3.symbols,其中包含:

• d3.symbolCircle
• d3.symbolCross
• d3.symbolDiamond
• d3.symbolSquare
• d3.symbolStar (版本4中的新功能)
• d3.symbolTriangle (v 4中只有一个三角形,而v3中只有2个)
• d3.symbolWye ('y'形符号,版本4中新增)

像往常一样的d3文档在这里很好地涵盖了这个主题.

为了显示符号,并显示如何使用数组动态设置形状,我在下面附加了一个片段:

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>