我们可用的 d3 符号列表

Posted 2023-02-24

【中文标题】我们可用的 d3 符号列表

【英文标题】：List of d3 symbols available to us

【发布时间】：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')

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

【参考方案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];) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js"></script>

【讨论】：

你能解释一下，这 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 是。