d3-shape

…

Installing

If you use NPM, npm install d3-shape. Otherwise, download the latest release.

API Reference

Arcs

…

# arc()

…

# arc(d, i)

…

# arc.centroid(d, i)

…

Note: to be consistent with arc, the arc’s associated accessors must be deterministic.

# arc.innerRadius([innerRadius])

…

# arc.outerRadius([outerRadius])

…

# arc.cornerRadius([cornerRadius])

…

# arc.padRadius([padRadius])

…

# arc.startAngle([startAngle])

…

# arc.endAngle([endAngle])

…

# arc.padAngle([padAngle])

…

The recommended minimum inner radius when using padding is outerRadius * padAngle / sin(θ), where θ is the angle of the smallest arc (without padding). For example, if the outerRadius is 200 pixels and the padAngle is 0.02 radians, a reasonable θ is 0.04 radians, and a reasonable innerRadius is 100 pixels.

See also pie.padAngle. (From which module?)

# arc.context([context])

…

Lines

…

# line()

…

# line(data)

…

# line.x([x])

…

# line.y([y])

…

# line.defined([defined])

…

# line.curve([curve[, parameters…]])

…

# line.context([context])

…

Areas

…

# area()

…

# area(data)

…

# area.x([x])

…

# area.x0([x0])

…

# area.x1([x1])

…

# area.y([y])

…

# area.y0([y0])

…

# area.y1([y1])

…

# area.defined([defined])

…

# area.curve([curve[, parameters…]])

…

# area.context([context])

…

Curves

Curves are typically not used directly, instead implementing paths for lines and areas; they are passed to line.curve and area.curve.

…

# basis(context)

…

# basisClosed(context)

…

# basisOpen(context)

…

# bundle(context[, beta])

…

# cardinal(context[, tension])

…

# cardinalClosed(context[, tension])

…

# cardinalOpen(context[, tension])

…

# catmullRom(context[, alpha])

…

# catmullRomClosed(context[, alpha])

…

# catmullRomOpen(context[, alpha])

…

# linear(context)

…

# linearClosed(context)

…

# natural(context)

…

# step(context)

…

# stepAfter(context)

…

# stepBefore(context)

…

# curve.areaStart()

…

Note: not implemented by closed curves, such as linearClosed.

# curve.areaEnd()

…

Note: not implemented by closed curves, such as linearClosed.

# curve.lineStart()

…

# curve.lineEnd()

…

# curve.point(x, y)

…

Symbols

…

# symbol()

…

# symbol.type([type])

…

# symbol.size([size])

…

# symbol.context([context])

…

Symbol Types

Symbol types are typically not used directly, instead implementing paths for symbols; they are passed to symbol.type.

…

# symbols

An array containing the set of all built-in symbol types: circle, cross, diamond, square, downwards triangle, and upwards triangle. Useful for constructing the range of an ordinal scale should you wish to use a shape encoding for categorical data.

# circle

…

# cross

…

# diamond

…

# square

…

# triangleDown

…

# triangleUp

…

# symbolType.draw(context, size)

…

Changes from D3 3.x:

• You can now render shapes to Canvas by specifying a context (e.g., line.context)! See d3-path for how it works.

• The interpretation of the cardinal spline tension parameter has been fixed. The default tension is now 0 (corresponding to a uniform Catmull–Rom spline), not 0.7. Due to a bug in 3.x, the tension parameter was previously only valid in the range [2/3, 1]; this corresponds to the new corrected range of [0, 1]. Thus, the new default value of 0 is equivalent to the old value of 2/3, and the default behavior is only slightly changed.

• To specify a cardinal spline tension of t, use line.curve(cardinal, t) instead of line.interpolate("cardinal").tension(t).

• To specify a custom line or area interpolator, implement a curve.

• Added natural cubic splines.

• Added Catmull–Rom splines, parameterized by alpha. If α = 0, produces a uniform Catmull–Rom spline equivalent to a Cardinal spline with zero tension; if α = 0.5, produces a centripetal spline; if α = 1.0, produces a chordal spline.

• By setting area.x1 or area.y1 to null, you can reuse the area.x0 or area.y0 value, rather than computing it twice. This is useful for nondeterministic values (e.g., jitter).

• Accessor functions now always return functions, even if the value was set to a constant.