Line Mark

Line marks are stroked paths with constant width, defined by an ordered set of (x, y) coordinates. While line marks default to using straight line segements, different interpolation methods can be used to create smoothed or stepped paths. Line marks are commonly used to depict trajectories or change over time.

Example

Type-Specific Mark Properties

Property Type Description
interpolate String The interpolation method to use. One of basis, bundle, cardinal, catmull-rom, linear, monotone, natural, step, step-after, step-before. The default is linear. You can find explanations for these line interpolators in the d3-shape documentation.
tension Number The tension value in the range [0, 1] to parameterize bundle (default 0.8), cardinal (default 0) or catmull-rom (default 0.5) interpolation.
defined Boolean A boolean flag indicating if the current data point is defined. If false, the corresponding line segment will be omitted, creating a “break”.

Note: If a data point on a line is surrounded by points with defined: false, it may not be visible. Use a strokeCap of round or square to ensure a visible point is drawn.

General Mark Properties

Property Type Description
x Number The primary x-coordinate in pixels.
x2 Number The secondary x-coordinate in pixels.
xc Number The center x-coordinate. Incompatible with x and x2.
width Number The width of the mark in pixels, if supported.
y Number The primary y-coordinate in pixels.
y2 Number The secondary y-coordinate in pixels.
yc Number The center y-coordinate. Incompatible with y and y2.
height Number The height of the mark in pixels, if supported.
opacity Number The mark opacity from 0 (transparent) to 1 (opaque).
fill Color The fill color.
fillOpacity Number The fill opacity from 0 (transparent) to 1 (opaque).
stroke Color The stroke color.
strokeOpacity Number The stroke opacity from 0 (transparent) to 1 (opaque).
strokeWidth Number The stroke width in pixels.
strokeCap String The stroke cap for line ending style. One of butt (default), round or square.
strokeDash Number[ ] An array of [stroke, space] lengths for creating dashed or dotted lines.
strokeDashOffset Number The pixel offset at which to start the stroke dash array.
strokeJoin String The stroke line join method. One of miter (default), round or bevel.
strokeMiterLimit Number The miter limit at which to bevel a line join.
cursor String The mouse cursor used over the mark. Any valid CSS cursor type can be used.
href URL A URL to load upon mouse click. If defined, the mark acts as a hyperlink.
tooltip String The tooltip text to show upon mouse hover.

For marks that support width and height settings (including rect and area), the horizontal dimensions are determined (in order of precedence) by the x and x2 properties, the x and width properties, the x2 and width properties, or the xc and width properties. If all three of x, x2 and width are specified, the width value is ignored. The y, y2, yc and height properties are treated similarly.

For marks that do not support width or height (including path and arc) similar calculations are applied, but are only used to determine the mark’s ultimate x and y position. The width property may affect the final x position, but otherwise is not visualized.

When using multiple spatial properties along the same dimension (x and x2, or y and y2), the properties must be specified in the same encoding set; for example, all within "enter": {...} or all within "update": {...}. Dividing the properties across encoding sets can cause unexpected behavior.