符号

¥Symbols

示例 · 符号提供类似于散点图的分类形状编码。符号以原点为中心；使用 transform 将符号移动到其他位置。

¥Examples · Symbols provide a categorical shape encoding as in a scatterplot. Symbols are centered at the origin; use a transform to move the symbol to a different position.

symbol(type, size)

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

¥Source · Constructs a new symbol generator of the specified type and size. If not specified, type defaults to a circle, and size defaults to 64.

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

symbol(...arguments) {#_symbol}

源代码 · 根据给定的参数生成一个符号。参数任意；它们会随 this 对象一起传递到符号生成器的访问器函数。在默认设置下，调用符号生成器将生成一个 64 像素的方形圆。

¥Source · Generates a symbol for the given arguments. The arguments are arbitrary; they are propagated to the symbol generator’s accessor functions along with the this object. With the default settings, invoking the symbol generator produces a circle of 64 square pixels.

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

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

¥If the symbol generator has a context, then the symbol is rendered to this context as a sequence of path method calls and this function returns void. Otherwise, a path data string is returned.

symbol.type(type) {#symbol_type}

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

¥Source · If type is specified, sets the symbol type to the specified function or symbol type and returns this symbol generator.

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

如果 type 为函数，则符号生成器的参数和 this 将被传递。这方便与 selection.attr 一起使用，例如与 序数尺度 结合使用以生成分类符号编码。

¥If type is a function, the symbol generator’s arguments and this are passed through. This is convenient for use with selection.attr, say in conjunction with an ordinal scale to produce a categorical symbol encoding.

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

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

¥If type is not specified, returns the current symbol type accessor.

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

符号类型访问器默认为：

¥The symbol type accessor defaults to:

function type() {
  return circle;
}

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

¥See symbolsFill and symbolsStroke for built-in symbol types. To implement a custom symbol type, pass an object that implements symbolType.draw.

symbol.size(size) {#symbol_size}

源代码 · 如果指定了 size，则将此簇布局的节点大小设置为指定的 [width, height] 双元素数组并返回此簇布局。

¥Source · If size is specified, sets the size to the specified function or number and returns this symbol generator.

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

如果大小为函数，则传递符号生成器的参数和 this。这方便与 selection.attr 一起使用，例如与 线性比例尺 结合使用以生成定量大小编码。

¥If size is a function, the symbol generator’s arguments and this are passed through. This is convenient for use with selection.attr, say in conjunction with a linear scale to produce a quantitative size encoding.

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

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

¥If size is not specified, returns the current size accessor.

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

size 访问器默认为：

¥The size accessor defaults to:

function size() {
  return 64;
}

symbol.context(context) {#symbol_context}

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

¥Source · If context is specified, sets the context and returns this symbol generator.

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

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

¥If context is not specified, returns the current context.

symbol.context() // context

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

¥The context defaults to null. If the context is not null, then the generated symbol is rendered to this context as a sequence of path method calls. Otherwise, a path data string representing the generated symbol is returned.

symbol.digits(digits) {#symbol_digits}

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

¥Source · If digits is specified, sets the maximum number of digits after the decimal separator and returns this symbol generator.

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

如果未指定数字，则返回当前最大分数数字，默认为 3。

¥If digits is not specified, returns the current maximum fraction digits, which defaults to 3.

symbol.digits() // 3

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

¥This option only applies when the associated context is null, as when this symbol generator is used to produce path data.

symbolsFill

源代码 · 包含一组用于填充的符号类型的数组：circle、cross、diamond、square、star、triangle 和 wye。Useful for a categorical shape encoding with an 序数尺度。

¥Source · An array containing a set of symbol types designed for filling: circle, cross, diamond, square, star, triangle, and wye. Useful for a categorical shape encoding with an ordinal scale.

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

symbolsStroke

源代码 · 包含一组用于描边的符号类型的数组：circle、plus、times、triangle2、asterisk、square2 和 diamond2。Useful for a categorical shape encoding with an 序数尺度。

¥Source · An array containing a set of symbol types designed for stroking: circle, plus, times, triangle2, asterisk, square2, and diamond2. Useful for a categorical shape encoding with an ordinal scale.

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

symbolAsterisk

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

¥Source · The asterisk symbol type; intended for stroking.

symbolCircle

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

¥Source · The circle symbol type; intended for either filling or stroking.

symbolCross

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

¥Source · The Greek cross symbol type, with arms of equal length; intended for filling.

symbolDiamond

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

¥Source · The rhombus symbol type; intended for filling.

symbolDiamond2

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

¥Source · The rotated square symbol type; intended for stroking.

symbolPlus

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

¥Source · The plus symbol type; intended for stroking.

symbolSquare

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

¥Source · The square symbol type; intended for filling.

symbolSquare2

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

¥Source · The square2 symbol type; intended for stroking.

symbolStar

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

¥Source · The pentagonal star (pentagram) symbol type; intended for filling.

symbolTriangle

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

¥Source · The up-pointing triangle symbol type; intended for filling.

symbolTriangle2

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

¥Source · The up-pointing triangle symbol type; intended for stroking.

symbolWye

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

¥Source · The Y-shape symbol type; intended for filling.

symbolTimes

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

¥Source · The X-shape symbol type; intended for stroking.

自定义符号

¥Custom symbols

符号类型通常不直接使用，而是传递给 symbol.type。但是，如果所有内置类型都不能满足你的需求，你可以使用以下接口定义自己的符号类型实现。你还可以将此低级接口与内置符号类型结合使用，作为符号生成器的替代方案。

¥Symbol types are typically not used directly, instead being passed to symbol.type. However, you can define your own symbol type implementation should none of the built-in types satisfy your needs using the following interface. You can also use this low-level interface with a built-in symbol type as an alternative to the symbol generator.

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) {#symbolType_draw}

将此符号类型渲染到指定的上下文中，并以指定的正方形像素大小为单位。上下文实现了 CanvasPathMethods 接口。（请注意，这是 CanvasRenderingContext2D 接口的子集！）另请参阅 d3-path。

¥Renders this symbol type to the specified context with the specified size in square pixels. The context implements the CanvasPathMethods interface. (Note that this is a subset of the CanvasRenderingContext2D interface!) See also d3-path.

pointRadial(angle, radius)

示例 · 源代码 · 返回给定角度（以弧度表示）对应的点 [x, y]，其中 0 度位于 -y 轴（12 点钟方向），正角度顺时针方向，半径为给定半径。

¥Examples · Source · Returns the point [x, y] for the given angle in radians, with 0 at -y (12 o’clock) and positive angles proceeding clockwise, and the given radius.

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