Shapes ​

The TemplateAPI contains a number of useful modules to create and manipulate different SVG shapes.

Shape ​

The Shape module provides numerous methods to create, modify and manage svg elements. But for templates they are broken down to three methods of interest:

const shape = Shape.create("g"); // returns a new svg g element
const bbox = Shape.getBBox(shape); // returns the bounding box of the shape
Shape.transform(shape, 300); // scales the shape to 300px

Shape Circle ​

The Shape.Circle() method creates a circle with the given radius.

const circle = Shape.Circle(150);

Shape Rectangle ​

The Shape.Rectangle() method creates a rectangle with the given width, height and corner radius.

const rectangle = Shape.Rectangle(150, 100, 10);

Shape Polygon ​

The Shape.Polygon() method creates a polygon with the given number of corners in the given radius and applies the given corner radius to the corners.

const polygon = Shape.Polygon(3, 150, 10);

Path Shape ​

The PathShape method takes a svg path code and returns a newly created d3 selection of a svg path element. It gets especially useful to create more complex paths.

// siluette of a house
const shape = PathShape("M 100 0 L 200 100 L 200 200 L 0 200 L 0 100 Z");

SVG Shape ​

The SVGShape behaves similar to the PathShape method but it accepts a whole svg code as parameter and returns a d3 selection of the created svg element.

// siluette of a house with a check ♢ symbol in the middle
const shape = SVGShape(`
	<g>
		<path d="M 100 0 L 200 100 L 200 200 L 0 200 L 0 100 Z" />
		<path d="M 100 0 L 200 100 L 200 200 L 0 200 L 0 100 Z" />
	</g>
`);

Tag Shape ​

The TagShape method builds a tag and returns a d3 selection of the created svg element. It takes 2 parameters to output a tag shape.

const tag = TagShape("Hello World", TagStyle(...));

Text Shape ​

The TextShape method builds a text and returns a d3 selection of the created svg element. It works similar to the TagShape and takes 2 parameters to output text shape.

const text = TextShape("Hello World", [ShapeStyle(...), ShapeStyle(...)]);