PathGradient

The PathGradient class represents a sequence of colors, one per vertex of a Path-like mark (Path, Line, or Polygon), used for the stroke color property. It is rendered as a chain of small linear gradients running along the mark’s actual vertices, one per segment, rather than along one fixed straight axis.

This is different from a LinearGradient, which paints along a single straight vector, so the color at any point on a shape depends on where that point falls spatially (its position within a bounding box or along a fixed line). That works for a straight or roughly-monotonic shape, but breaks down for a curve that loops or spirals, where a point’s spatial position has no reliable relationship to its position along the curve. A PathGradient instead assigns a color directly to each vertex, so the color at any point on the curve is always the color of the vertex (or interpolated between the two nearest vertices) closest to it – correct regardless of the path’s shape.

To create a PathGradient object directly, use the gradient function:

    let pg = msc.gradient("path", ["red", "orange", "yellow"]);
    line.strokeColor = pg;

More commonly, a PathGradient is created automatically by encoding the "strokeGradient" channel with msc.encode, which computes one color per vertex from a data field using the same color-scheme machinery as fillColor/strokeColor:

    msc.encode(curve, "strokeGradient", "ppm", {domain: [360, 435], scheme: "interpolateYlOrRd"});

The element being encoded (curve above) must be a mark with vertices – typically the result of msc.densify on a Path, Line, or Polygon. A legend for a strokeGradient encoding can be created the same way as for any other color channel:

    scene.legend("strokeGradient", "ppm", {x: 630, y: 140, orientation: "vertical"});

Properties#

Methods#