我们可用的 d3 符号列表答案

【问题标题】：List of d3 symbols available to us我们可用的 d3 符号列表
【发布时间】：2014-08-23 17:21:41
【问题描述】：

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

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

一些可用的符号包括三角形、菱形。在记录整个列表的任何地方是否有任何可用的文档。

【问题讨论】：

标签： javascript d3.js symbols

【解决方案1】：

对于版本 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 文档照常涵盖the topic well here。

为了显示符号，以及如何使用数组来动态设置形状，我在下面附上了一个 sn-p：

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];}) );

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js"&gt;&lt;/script&gt;

【讨论】：

你能解释一下，这 2 行是如何工作的吗？ ` .attr('transform',function(d,i) { return 'translate('+(i*20+20)+','+30+')';}) .attr('d', d3. symbol().type(function(d,i) { return d3.symbols[i];}) );`
当您在这样的选择中看到function(d,i) 时，您正在访问与选择中的每个元素关联的基准和增量。因此，在第一行中，符号位于下方 30 像素处，距左侧 i*20+20 像素处。第二行返回一个d3符号类型，因为d3.symbols是一个数组，我们可以使用增量来选择一个特定的符号。
其实我只是想创建一个符号这是正确的做法吗？ 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];}) ) 还有，我正在尝试在符号上创建拖放，你能帮我解决这个问题吗？
是的，尽管d3.select('body').append('svg') 可能是您想要的。至于拖放，这对于评论来说太多了，并且与添加到答案中的问题太不同了。它可能已经作为一个问题存在，或者需要作为一个问题提出。
你能回答这个question吗？

【解决方案2】：

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

圈子 - 一个circle。

cross - Greek cross 或加号。

钻石 - rhombus。

正方形 - 轴对齐的square。

triangle-down - 指向下方的equilateral triangle。

triangle-up - 一个向上的等边三角形。

D3 还有一个存储可用符号的对象（再次感谢@jshanley）。例如。对于 D3 3.4.6：

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

【讨论】：

您还可以使用d3.svg.symbolTypes 返回您的 d3 版本支持的类型数组。
酷，谢谢 :) 我想知道是否有更多可用的符号类型或只有这 6 种？ :(
这不再是正确答案。 @Andrew Reid 是。