All examples By author By category About

Andrew-Reid
Full window Github gist

Pattern Module Demo

d3.pattern

A quick and dirty (emphasis on quick) attempt to create a module that allows easier use of SVG patterns. Features six pattern types with default settings for each (defaults used in block):

It certainly isn't yet complete - for example for the circles, squares, and symbol patterns I need to add the ability to modify the background color.

This is part of an occasional effort on a side of desk project that requires a textured map fills.

Pattern Methods

Each type has similar methods, all take the general format:

d3.pattern(svg[optional],id[optional])

svg is a d3 selection of an svg element. This is the svg that the pattern defs will be appended to. id refers to the pattern id to be passed to an element's fill attribute.

If either are not set, svg will default to d3.select("svg"), while id will autoincrement with the format: "#d3Pattern-index" where index is the first available number.

pattern.use()

Used to apply the pattern: .attr("fill",pattern.use());

d3.patternStripes()

patternStripes.color(color)

Takes an array of colors, the number of colors equal the number of stripes. If not provided, returns the current colors.

patternStripes.width(width)

Takes a single number or an array of numbers representing the width of each stripe. Does not need to be the same length as the colors array. If there are less widths than colors, widths are reused. If not provided, returns the current colors.

patternStripes.opacity(opacity)

Takes a single number or an array of numbers representing the opacity of each stripe. Does not need to be the same length as the colors array. If there are less opacities than colors, opacities are reused. If not provided, returns the current opacity.

patternStripes.angle(angle)

Takes a single number, representing the angle that the stripes should be shown at. If not provided, returns the current angle.

d3.patternPlaid()

This has similar methods to patternStripe, except that everything is doubled. Instead of .width, there is .widthX() and .widthY().

This allows specification of two sets of stripes. There are X and Y methods for width, opacity, and color. Angle is set for the entire pattern, not for one set of lines or the other.

d3.patternCheckers()

patternCheckers.width(width)

Takes a single number, representing the width/height of each checker square. If not provided, returns the current width.

patternCheckers.colors(colors)

Takes an array of two numbers, representing the two colors of the checkerboard. If not provided, returns the current two colors.

patternCheckers.opacity(opacity)

Takes an array of two numbers, representing the two opacities of the two colors of the checkerboard. If not provided, returns the current two opacities.

patternCheckers.angle(angle)

Takes a single number, representing the angle that the stripes should be shown at. If not provided, returns the current angle.

d3.patternDots()

patternDots.spacing(spacing)

The distance between dot centroids measured on the x or y axis. If not specified, returns the current spacing.

patternDots.color(color)

The color of the dots. If not specified, returns the current color.

patternDots.radius(radius)

The radius of the dots. If not specified, returns the current radius.

patternDots.angle(angle)

The angle of the pattern. If not specified, returns the current angle of the pattern.

d3.patternSquares()

Same as circles, but instead of a radius method, there is a .edgeLength() method which sets square edge length as opposed to circle radius.

d3.patternSymbols()

patternSymbols.spacing(spacing)

The distance between symbol centroids measured on the x or y axis. If not specified, returns the current spacing.

patternSymbols.color(color)

The color of the symbols. If not specified, returns the current color.

patternSymbols.stroke(stroke)

The 1px stroke of the symbols, defaults to none. If not specified, returns the current stroke color.

patternSymbols.symbol(symbol)

The path of a symbol to show. Can use d3 symbols: patternSymbols.symbol(d3.symbol().type(d3.symbolWye)). If not specified, returns the current angle of the pattern.

patternSymbols.angle(angle)

The angle of the pattern. If not specified, returns the current angle of the pattern.