d3.arc function
d3.arc creates a new arc generator for circular or annular sectors, as in a pie or donut chart.
d3-shape/arc
32 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
arc generator function
An arc generator function generates an arc for the given datum.
arc.centroid method
arc.centroid computes an arc's midpoint.
arc.innerRadius method
arc.innerRadius sets the inner radius.
arc.outerRadius method
arc.outerRadius sets the outer radius.
arc.cornerRadius method
arc.cornerRadius sets the corner radius for rounded corners.
arc.startAngle method
arc.startAngle sets the start angle.
arc.endAngle method
arc.endAngle sets the end angle.
arc.padAngle method
arc.padAngle sets the angle between adjacent arcs for padded arcs.
arc.padRadius method
arc.padRadius sets the radius at which to linearize padding.
arc.context method
arc.context sets the rendering context.
arc.digits method
arc.digits sets the output precision.
arc example configuring with constant values
const arc = d3.arc() .innerRadius(0) .outerRadius(100) .startAngle(0) .endAngle(Math.PI / 2); arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
arc example canvas context rendering
const context = canvas.getContext("2d"); const arc = d3.arc().context(context);
arc() constructor creates a new arc generator
d3.arc() constructs a new arc generator with default settings. The arc generator can be called immediately or configured with accessor methods before calling.
arc generator produces circular or annular sector path
An arc generator produces a circular (pie) or annular (donut) sector. It generates SVG path data by default or can render to a 2D canvas context. Arcs are centered at the origin; use a transform attribute to move the arc to a different position.
arc angular span rules for complete circle
If the absolute difference between startAngle and endAngle (the angular span) is greater than or equal to 2π, the arc generator produces a complete circle or annulus. If the angular span is less than 2π, the arc's angular length equals the absolute difference between the angles, going clockwise if the signed difference is positive and counterclockwise if negative.
arc() call signature returns path data or renders to context
Calling arc(arguments) generates an arc for the given arguments, which are propagated to the arc generator's accessor functions. If a context is set, the arc is rendered to that context as a sequence of path method calls and returns void. Otherwise, an SVG path data string is returned.
arc.centroid() computes midpoint of arc center line
arc.centroid(arguments) computes the midpoint [x, y] of the center line of the arc that would be generated by the given arguments. The midpoint is calculated as (startAngle + endAngle) / 2 and (innerRadius + outerRadius) / 2. This is a convenience method for positioning labels and is not the geometric center of the arc.
arc.outerRadius() accessor for outer radius
arc.outerRadius(radius) sets the outer radius to the specified function or number and returns the arc generator. If radius is not specified, returns the current outer radius accessor. The default accessor is: function outerRadius(d) { return d.outerRadius; }. If the outer radius is smaller than the inner radius, they are swapped. Negative values are treated as zero.
arc.cornerRadius() rounds arc corners
arc.cornerRadius(radius) sets the corner radius to the specified function or number and returns the arc generator. If radius is not specified, returns the current corner radius accessor, which defaults to 0. If the corner radius is greater than zero, corners of the arc are rounded using circles of the given radius. For a circular sector, the two outer corners are rounded; for an annular sector, all four corners are rounded. The corner radius may not exceed (outerRadius - innerRadius) / 2. For arcs with angular span less than π, the corner radius may be reduced as adjacent rounded corners intersect.
arc.endAngle() accessor for end angle in radians
arc.endAngle(angle) sets the end angle to the specified function or number and returns the arc generator. If angle is not specified, returns the current end angle accessor. The default accessor is: function endAngle(d) { return d.endAngle; }. The angle is specified in radians, with 0 at -y (12 o'clock) and positive angles proceeding clockwise. If |endAngle - startAngle| ≥ 2π, a complete circle or annulus is generated.
arc.padAngle() adds spacing between adjacent arcs
arc.padAngle(angle) sets the pad angle to the specified function or number and returns the arc generator. If angle is not specified, returns the current pad angle accessor, which defaults to: function padAngle() { return d && d.padAngle; }. The pad angle is converted to a fixed linear distance separating adjacent arcs, defined as padRadius × padAngle. This distance is subtracted equally from the start and end angles of the arc. If the arc forms a complete circle or annulus (|endAngle - startAngle| ≥ 2π), the pad angle is ignored.
arc.padRadius() controls pad angle distance
arc.padRadius(radius) sets the pad radius to the specified function or number and returns the arc generator. If radius is not specified, returns the current pad radius accessor, which defaults to null. When null, the pad radius is automatically computed as sqrt(innerRadius × innerRadius + outerRadius × outerRadius). The pad radius determines the fixed linear distance separating adjacent arcs, defined as padRadius × padAngle.
arc.context() sets canvas rendering context
arc.context(context) sets the context and returns the arc generator. If context is not specified, returns the current context, which defaults to null. If the context is not null, the generated arc is rendered to that context as a sequence of 2D canvas path method calls. Otherwise, an SVG path data string is returned.
arc.digits() sets path data precision
arc.digits(digits) sets the maximum number of digits after the decimal separator and returns the arc generator. If digits is not specified, returns the current maximum fraction digits, which defaults to 3. This option only applies when the associated context is null, when the arc generator produces SVG path data.
arc example basic usage with object argument
const arc = d3.arc(); arc({ innerRadius: 0, outerRadius: 100, startAngle: 0, endAngle: Math.PI / 2 }); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
arc example with SVG transform
svg.append("path") .attr("transform", "translate(100,100)") .attr("d", d3.arc()({ innerRadius: 100, outerRadius: 200, startAngle: -Math.PI / 2, endAngle: Math.PI / 2 }));
padAngle minimum inner radius recommendation
The recommended minimum inner radius when using padding is outerRadius × padAngle / sin(θ), where θ is the angular span of the smallest arc before padding. For example, with an outer radius of 200 pixels and a pad angle of 0.02 radians, a reasonable angular span is 0.04 radians and a reasonable inner radius is 100 pixels. Padding is typically applied only to annular sectors (innerRadius > 0).
padAngle commonly computed by pie generator
The pad angle is often computed by the pie generator rather than set directly on the arc generator, to ensure that the area of padded arcs is proportional to their value. Applying a constant pad angle directly to the arc generator tends to subtract disproportionately from smaller arcs, introducing distortion.
arc corner radius pitfall with small angles
When the corner radius is greater than zero and the arc's angular span is less than π, the corner radius may be reduced as adjacent rounded corners intersect. This occurs more often with inner corners. See the arc corners animation for detailed illustration of this behavior.
arc radius swapping behavior
If the outer radius is smaller than the inner radius, the inner and outer radii are swapped automatically. Negative radius values are treated as zero.