作者Observable

外观

符号 ​

示例 · 符号提供了一种分类形状编码，就像散点图一样。符号以原点为中心；使用 transform 将符号移动到不同的位置。

symbol(type, size) ​

源代码 · 构造一个指定 类型 和 大小 的新符号生成器。如果未指定，type 默认值为圆形，size 默认值为 64。

js
svg.append("path").attr("d", d3.symbol(d3.symbolCross));

symbol(...arguments) ​

源代码 · 为给定的 arguments 生成一个符号。arguments 是任意的；它们会与 this 对象一起传播到符号生成器的访问器函数中。使用默认设置，调用符号生成器会生成一个 64 平方像素的圆形。

js
d3.symbol()() // "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0"

如果符号生成器有 context，则符号将渲染到此 context 中，作为一系列 路径方法 调用，并且此函数返回 void。否则，将返回一个 路径数据 字符串。

symbol.type(type) ​

源代码 · 如果指定了 type，则将符号类型设置为指定的函数或符号类型，并返回此符号生成器。

js
const symbol = d3.symbol().type(d3.symbolCross);

如果 type 是一个函数，则符号生成器的参数和 this 将被传递。这对于与 selection.attr 一起使用很方便，例如，结合 序数刻度 来产生分类形状编码。

js
const symbolType = d3.scaleOrdinal(d3.symbolsFill);
const symbol = d3.symbol().type((d) => symbolType(d.category));

如果未指定 type，则返回当前符号类型访问器。

js
symbol.type() // () => d3.symbolCross

符号类型访问器默认为

js
function type() {
  return circle;
}

参见 symbolsFill 和 symbolsStroke 获取内置符号类型。要实现自定义符号类型，请传递一个实现 symbolType.draw 的对象。

symbol.size(size) ​

源代码 · 如果指定了 size，则将大小设置为指定的函数或数字，并返回此符号生成器。

js
const symbol = d3.symbol().size(100);

如果 size 是一个函数，则符号生成器的参数和 this 将被传递。这对于与 selection.attr 一起使用很方便，例如，结合 线性刻度 来产生定量大小编码。

js
const symbolSize = d3.scaleLinear([0, 100]);
const symbol = d3.symbol().size((d) => symbolSize(d.value));

如果未指定 size，则返回当前大小访问器。

js
symbol.size() // () => 100

大小访问器默认为

js
function size() {
  return 64;
}

symbol.context(context) ​

源代码 · 如果指定了 context，则设置 context 并返回此符号生成器。

js
const context = canvas.getContext("2d");
const symbol = d3.symbol().context(context);

如果未指定 context，则返回当前 context。

js
symbol.context() // context

context 默认值为 null。如果 context 不为 null，则 生成的符号 将渲染到此 context 中，作为一系列 路径方法 调用。否则，将返回一个表示生成的符号的 路径数据 字符串。

symbol.digits(digits) ​

源代码 · 如果指定了 digits，则设置小数点后的最大位数，并返回此符号生成器。

js
const symbol = d3.symbol().digits(3);

如果未指定 digits，则返回当前最大小数位数，默认为 3。

js
symbol.digits() // 3

此选项仅在关联的 context 为 null 时才适用，例如，当此符号生成器用于生成 路径数据 时。

symbolsFill ​

circlecrossdiamondsquarestartrianglewye

源代码 · 一个包含一组专为填充而设计的符号类型的数组：圆形、十字、菱形、正方形、星形、三角形 和 Y 形。对于使用 序数刻度 的分类形状编码很有用。

js
const symbolType = d3.scaleOrdinal(d3.symbolsFill);

symbolsStroke ​

asteriskcirclediamond2plussquare2timestriangle2

源代码 · 一个包含一组专为描边而设计的符号类型的数组：圆形、加号、乘号、三角形 2、星号、正方形 2 和 菱形 2。对于使用 序数刻度 的分类形状编码很有用。

js
const symbolType = d3.scaleOrdinal(d3.symbolsStroke);

symbolAsterisk ​

源代码 · 星号符号类型；用于描边。

symbolCircle ​

源代码 · 圆形符号类型；用于填充或描边。

symbolCross ​

源代码 · 希腊十字符号类型，臂长相等；用于填充。

symbolDiamond ​

源代码 · 菱形符号类型；用于填充。

symbolDiamond2 ​

源代码 · 旋转的正方形符号类型；用于描边。

symbolPlus ​

源代码 · 加号符号类型；用于描边。

symbolSquare ​

源代码 · 正方形符号类型；用于填充。

symbolSquare2 ​

源代码 · 正方形 2 符号类型；用于描边。

symbolStar ​

源代码 · 五角星 (五角星形) 符号类型；用于填充。

symbolTriangle ​

源代码 · 向上指的三角形符号类型；用于填充。

symbolTriangle2 ​

源代码 · 向上指的三角形符号类型；用于描边。

symbolWye ​

源代码 · Y 形符号类型；用于填充。

symbolTimes ​

源代码 · X 形符号类型；用于描边。

自定义符号 ​

符号类型通常不会直接使用，而是传递给 symbol.type。但是，如果您需要使用内置类型之外的类型，可以使用以下接口定义自己的符号类型实现。您也可以使用此低级接口与内置符号类型一起使用，作为符号生成器的替代方案。

js
const path = d3.pathRound(3);
const circle = d3.symbolCircle.draw(path, 64);
path.toString(); // "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0"

symbolType.draw(context, size) ​

将此符号类型渲染到指定的context，以平方像素为单位的指定size。context 实现 CanvasPathMethods 接口。（注意，这只是 CanvasRenderingContext2D 接口的一个子集！）另请参见 d3-path。

pointRadial(angle, radius) ​

示例 · 源代码 · 返回给定angle（以弧度为单位）的点 [x, y]，其中 0 在 -y（12 点钟方向），正角度顺时针方向，以及给定的radius。

js
d3.pointRadial(Math.PI / 3, 100) // [86.60254037844386, -50]