d3.symbol - create a new symbol generator
d3.symbol creates a new symbol generator for drawing categorical shapes such as used in scatterplots.
d3-shape/symbol
37 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
symbol.type - set the symbol type
The symbol.type method sets the symbol type for a symbol generator.
symbol.size - set the size of the symbol in square pixels
The symbol.size method sets the size of the symbol in square pixels for a symbol generator.
symbol.context - set the rendering context
The symbol.context method sets the rendering context for a symbol generator.
symbol.digits - set the output precision
The symbol.digits method sets the output precision for a symbol generator.
d3.symbolsFill - an array of built-in symbol types for filling
d3.symbolsFill is an array containing built-in symbol types suitable for filling.
d3.symbolsStroke - an array of built-in symbol types for stroking
d3.symbolsStroke is an array containing built-in symbol types suitable for stroking.
d3.pointRadial - relative coordinates of a point given an angle and radius
d3.pointRadial returns the relative coordinates of a point given an angle and radius.
symbolType.draw - draw this symbol to the given context
The symbolType.draw method draws the symbol to the given rendering context.
symbol() constructor signature
d3.symbol(type, size) constructs a new symbol generator. The type parameter specifies the symbol type and defaults to circle. The size parameter specifies the symbol size in square pixels and defaults to 64.
symbol generator invocation
When a symbol generator is invoked with no context, it returns a path data string representing the generated symbol. When the symbol generator has a context set, it renders to that context as canvas path method calls and returns void. The default settings produce a circle of 64 square pixels.
symbol.type() accessor
symbol.type(type) sets the symbol type to the specified function or symbol type and returns the symbol generator. If type is a function, the symbol generator's arguments and this context are passed through. If type is not specified, returns the current symbol type accessor. The default type accessor returns d3.symbolCircle.
symbol.size() accessor
symbol.size(size) sets the size to the specified function or number and returns the symbol generator. If size is a function, the symbol generator's arguments and this context are passed through. If size is not specified, returns the current size accessor. The size defaults to 64 square pixels.
symbol.context() accessor
symbol.context(context) sets the rendering context and returns the symbol generator. If context is not specified, returns the current context. The context defaults to null. When context is not null, the generated symbol is rendered to that context as canvas path method calls. Otherwise, a path data string is returned.
symbol.digits() accessor
symbol.digits(digits) sets the maximum number of digits after the decimal separator and returns the symbol generator. If digits is not specified, returns the current maximum fraction digits, which defaults to 3. This option only applies when the context is null, for path data generation.
symbolsFill array
d3.symbolsFill is an array containing seven symbol types designed for filling: symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, and symbolWye. This is useful for categorical shape encoding with an ordinal scale.
symbolsStroke array
d3.symbolsStroke is an array containing seven symbol types designed for stroking: symbolCircle, symbolPlus, symbolTimes, symbolTriangle2, symbolAsterisk, symbolSquare2, and symbolDiamond2. This is useful for categorical shape encoding with an ordinal scale.
symbolCircle
d3.symbolCircle is the circle symbol type, intended for either filling or stroking.
symbolCross
d3.symbolCross is the Greek cross symbol type with arms of equal length, intended for filling.
symbolDiamond
d3.symbolDiamond is the rhombus symbol type, intended for filling.
symbolDiamond2
d3.symbolDiamond2 is the rotated square symbol type, intended for stroking.
symbolPlus
d3.symbolPlus is the plus symbol type, intended for stroking.
symbolSquare
d3.symbolSquare is the square symbol type, intended for filling.
symbolSquare2
d3.symbolSquare2 is the square2 symbol type, intended for stroking.
symbolStar
d3.symbolStar is the pentagonal star (pentagram) symbol type, intended for filling.
symbolTriangle
d3.symbolTriangle is the up-pointing triangle symbol type, intended for filling.
symbolTriangle2
d3.symbolTriangle2 is the up-pointing triangle symbol type, intended for stroking.
symbolWye
d3.symbolWye is the Y-shape symbol type, intended for filling.
symbolTimes
d3.symbolTimes is the X-shape symbol type, intended for stroking.
symbolAsterisk
d3.symbolAsterisk is the asterisk symbol type, intended for stroking.
symbolType.draw() interface
symbolType.draw(context, size) renders the symbol type to the specified context with the specified size in square pixels. The context implements the CanvasPathMethods interface, which is a subset of the CanvasRenderingContext2D interface. This is a low-level interface for defining custom symbol implementations.
pointRadial() function
d3.pointRadial(angle, radius) returns the point [x, y] for the given angle in radians and radius. The angle 0 is at -y (12 o'clock) and positive angles proceed clockwise.
symbol example with ordinal scale for type
const symbolType = d3.scaleOrdinal(d3.symbolsFill); const symbol = d3.symbol().type((d) => symbolType(d.category)); This example shows how to create a categorical symbol encoding using an ordinal scale to map data categories to symbol types.
symbol example with linear scale for size
const symbolSize = d3.scaleLinear([0, 100]); const symbol = d3.symbol().size((d) => symbolSize(d.value)); This example shows how to create a quantitative size encoding using a linear scale to map data values to symbol sizes.
symbol default invocation example
d3.symbol()() returns the path data string: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0" This is the default circle symbol with size 64.
custom symbol type using draw interface example
const path = d3.pathRound(3); const circle = d3.symbolCircle.draw(path, 64); path.toString(); This example shows how to directly use the symbolType.draw() interface with a path object to generate symbol path data.
symbol centered at origin
Symbols are centered at the origin. Use an SVG transform attribute to move the symbol to a different position.