Awesome

d3plus-shape

Fancy SVG shapes for visualizations

Installing

If using npm, npm install d3plus-shape. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus-shape";

d3plus-shape can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-shape@1"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. :beers:

API Reference

• Image
• Area
• Bar
• Box
• Circle
• Line
• Path
• Rect
• Shape
• Whisker

• largestRect - An angle of zero means that the longer side of the polygon (the width) will be aligned with the x axis. An angle of 90 and/or -90 means that the longer side of the polygon (the width) will be aligned with the y axis. The value can be a number between -90 and 90 specifying the angle of rotation of the polygon, a string which is parsed to a number, or an array of numbers specifying the possible rotations of the polygon.
• lineIntersection - Finds the intersection point (if there is one) of the lines p1q1 and p2q2.
• path2polygon - Transforms a path string into an Array of points.
• pointDistance - Calculates the pixel distance between two points.
• pointDistanceSquared - Returns the squared euclidean distance between two points.
• pointRotate - Rotates a point around a given origin.
• polygonInside - Checks if one polygon is inside another polygon.
• polygonRayCast - Gives the two closest intersection points between a ray cast from a point inside a polygon. The two points should lie on opposite sides of the origin.
• polygonRotate - Rotates a point around a given origin.
• segmentBoxContains - Checks whether a point is inside the bounding box of a line segment.
• segmentsIntersect - Checks whether the line segments p1q1 && p2q2 intersect.
• shapeEdgePoint - Calculates the x/y position of a point at the edge of a shape, from the center of the shape, given a specified pixel distance and radian angle.
• largestRect - Simplifies the points of a polygon using both the Ramer-Douglas-Peucker algorithm and basic distance-based simplification. Adapted to an ES6 module from the excellent Simplify.js.

• LargestRect - The returned Object of the largestRect function.

<a name="Image"></a>

Image <>

This is a global class.

• Image
  • new Image()
  • .render([callback]) ↩︎
  • .data([data]) ↩︎
  • .duration([ms]) ↩︎
  • .height([value]) ↩︎
  • .id([value]) ↩︎
  • .opacity([value]) ↩︎
  • .pointerEvents([value]) ↩︎
  • .select([selector]) ↩︎
  • .url([value]) ↩︎
  • .width([value]) ↩︎
  • .x([value]) ↩︎
  • .y([value]) ↩︎

<a name="new_Image_new" href="#new_Image_new">#</a> new Image()

Creates SVG images based on an array of data.

a sample row of data

var data = {"url": "file.png", "width": "100", "height": "50"};

passed to the generator

new Image().data([data]).render();

creates the following

<image class="d3plus-Image" opacity="1" href="file.png" width="100" height="50" x="0" y="0"></image>

this is shorthand for the following

image().data([data])();

which also allows a post-draw callback function

image().data([data])(function() { alert("draw complete!"); })

<a name="Image.render" href="#Image.render">#</a> Image.render([callback]) <>

Renders the current Image to the page. If a callback is specified, it will be called once the images are done drawing.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

<a name="Image.data" href="#Image.data">#</a> Image.data([data]) <>

If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array. An <image> tag will be drawn for each object in the array.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

<a name="Image.duration" href="#Image.duration">#</a> Image.duration([ms]) <>

If ms is specified, sets the animation duration to the specified number and returns the current class instance. If ms is not specified, returns the current animation duration.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

<a name="Image.height" href="#Image.height">#</a> Image.height([value]) <>

If value is specified, sets the height accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

function(d) {
  return d.height;
}

<a name="Image.id" href="#Image.id">#</a> Image.id([value]) <>

If value is specified, sets the id accessor to the specified function and returns the current class instance.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

function(d) {
  return d.id;
}

<a name="Image.opacity" href="#Image.opacity">#</a> Image.opacity([value]) <>

Sets the opacity of the image.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

<a name="Image.pointerEvents" href="#Image.pointerEvents">#</a> Image.pointerEvents([value]) <>

If value is specified, sets the pointer-events accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

<a name="Image.select" href="#Image.select">#</a> Image.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

<a name="Image.url" href="#Image.url">#</a> Image.url([value]) <>

If value is specified, sets the URL accessor to the specified function and returns the current class instance.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

function(d) {
  return d.url;
}

<a name="Image.width" href="#Image.width">#</a> Image.width([value]) <>

If value is specified, sets the width accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

function(d) {
  return d.width;
}

<a name="Image.x" href="#Image.x">#</a> Image.x([value]) <>

If value is specified, sets the x accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

function(d) {
  return d.x || 0;
}

<a name="Image.y" href="#Image.y">#</a> Image.y([value]) <>

If value is specified, sets the y accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Image</code>, and is chainable with other methods of this Class.

function(d) {
  return d.y || 0;
}

<a name="Area"></a>

Area <>

This is a global class, and extends all of the methods and functionality of <code>Shape</code>.

• Area ⇐ <code>Shape</code>
  • new Area()
  • .render([callback]) ↩︎
  • .curve([value]) ↩︎
  • .defined([value]) ↩︎
  • .x([value]) ↩︎
  • .x0([value]) ↩︎
  • .x1([value]) ↩︎
  • .y([value]) ↩︎
  • .y0([value]) ↩︎
  • .y1([value]) ↩︎

<a name="new_Area_new" href="#new_Area_new">#</a> new Area()

Creates SVG areas based on an array of data.

<a name="Area.render" href="#Area.render">#</a> Area.render([callback]) <>

Draws the area polygons.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Area.curve" href="#Area.curve">#</a> Area.curve([value]) <>

If value is specified, sets the area curve to the specified string and returns the current class instance. If value is not specified, returns the current area curve.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Area.defined" href="#Area.defined">#</a> Area.defined([value]) <>

If value is specified, sets the defined accessor to the specified function and returns the current class instance. If value is not specified, returns the current defined accessor.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Area.x" href="#Area.x">#</a> Area.x([value]) <>

If value is specified, sets the x accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current x accessor.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Area.x0" href="#Area.x0">#</a> Area.x0([value]) <>

If value is specified, sets the x0 accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current x0 accessor.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Area.x1" href="#Area.x1">#</a> Area.x1([value]) <>

If value is specified, sets the x1 accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current x1 accessor.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Area.y" href="#Area.y">#</a> Area.y([value]) <>

If value is specified, sets the y accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current y accessor.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Area.y0" href="#Area.y0">#</a> Area.y0([value]) <>

If value is specified, sets the y0 accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current y0 accessor.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Area.y1" href="#Area.y1">#</a> Area.y1([value]) <>

If value is specified, sets the y1 accessor to the specified function or number and returns the current class instance. If value is not specified, returns the current y1 accessor.

This is a static method of <code>Area</code>, and is chainable with other methods of this Class.

<a name="Bar"></a>

Bar <>

This is a global class, and extends all of the methods and functionality of <code>Shape</code>.

• Bar ⇐ <code>Shape</code>
  • new Bar()
  • .render([callback]) ↩︎
  • .height([value]) ↩︎
  • .width([value]) ↩︎
  • .x0([value]) ↩︎
  • .x1([value]) ↩︎
  • .y0([value]) ↩︎
  • .y1([value]) ↩︎

<a name="new_Bar_new" href="#new_Bar_new">#</a> new Bar()

Creates SVG areas based on an array of data.

<a name="Bar.render" href="#Bar.render">#</a> Bar.render([callback]) <>

Draws the bars.

This is a static method of <code>Bar</code>, and is chainable with other methods of this Class.

<a name="Bar.height" href="#Bar.height">#</a> Bar.height([value]) <>

If value is specified, sets the height accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Bar</code>, and is chainable with other methods of this Class.

function(d) {
  return d.height;
}

<a name="Bar.width" href="#Bar.width">#</a> Bar.width([value]) <>

If value is specified, sets the width accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Bar</code>, and is chainable with other methods of this Class.

function(d) {
  return d.width;
}

<a name="Bar.x0" href="#Bar.x0">#</a> Bar.x0([value]) <>

If value is specified, sets the x0 accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Bar</code>, and is chainable with other methods of this Class.

<a name="Bar.x1" href="#Bar.x1">#</a> Bar.x1([value]) <>

If value is specified, sets the x1 accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Bar</code>, and is chainable with other methods of this Class.

<a name="Bar.y0" href="#Bar.y0">#</a> Bar.y0([value]) <>

If value is specified, sets the y0 accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Bar</code>, and is chainable with other methods of this Class.

<a name="Bar.y1" href="#Bar.y1">#</a> Bar.y1([value]) <>

If value is specified, sets the y1 accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Bar</code>, and is chainable with other methods of this Class.

<a name="Box"></a>

Box <>

This is a global class, and extends all of the methods and functionality of <code>BaseClass</code>.

• Box ⇐ <code>BaseClass</code>
  • new Box()
  • .render([callback]) ↩︎
  • .active([value]) ↩︎
  • .data([data]) ↩︎
  • .hover([value]) ↩︎
  • .medianConfig([value]) ↩︎
  • .orient([value]) ↩︎
  • .outlier(_) ↩︎
  • .outlierConfig([value]) ↩︎
  • .rectConfig([value]) ↩︎
  • .rectWidth([value]) ↩︎
  • .select([selector]) ↩︎
  • .whiskerConfig([value]) ↩︎
  • .whiskerMode([value]) ↩︎
  • .x([value]) ↩︎
  • .y([value]) ↩︎

<a name="new_Box_new" href="#new_Box_new">#</a> new Box()

Creates SVG box based on an array of data.

<a name="Box.render" href="#Box.render">#</a> Box.render([callback]) <>

Draws the Box.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.active" href="#Box.active">#</a> Box.active([value]) <>

Sets the highlight accessor to the Shape class's active function.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.data" href="#Box.data">#</a> Box.data([data]) <>

If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.hover" href="#Box.hover">#</a> Box.hover([value]) <>

Sets the highlight accessor to the Shape class's hover function.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.medianConfig" href="#Box.medianConfig">#</a> Box.medianConfig([value]) <>

If value is specified, sets the config method for median and returns the current class instance.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.orient" href="#Box.orient">#</a> Box.orient([value]) <>

If value is specified, sets the orientation to the specified value. If value is not specified, returns the current orientation.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.outlier" href="#Box.outlier">#</a> Box.outlier(_) <>

If value is specified, sets the outlier accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.outlierConfig" href="#Box.outlierConfig">#</a> Box.outlierConfig([value]) <>

If value is specified, sets the config method for each outlier point and returns the current class instance.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.rectConfig" href="#Box.rectConfig">#</a> Box.rectConfig([value]) <>

If value is specified, sets the config method for rect shape and returns the current class instance.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.rectWidth" href="#Box.rectWidth">#</a> Box.rectWidth([value]) <>

If value is specified, sets the width accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

function(d) {
  return d.width;
}

<a name="Box.select" href="#Box.select">#</a> Box.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.whiskerConfig" href="#Box.whiskerConfig">#</a> Box.whiskerConfig([value]) <>

If value is specified, sets the config method for whisker and returns the current class instance.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.whiskerMode" href="#Box.whiskerMode">#</a> Box.whiskerMode([value]) <>

Determines the value used for each whisker. Can be passed a single value to apply for both whiskers, or an Array of 2 values for the lower and upper whiskers (in that order). Accepted values are "tukey", "extent", or a Number representing a quantile.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

<a name="Box.x" href="#Box.x">#</a> Box.x([value]) <>

If value is specified, sets the x axis to the specified function or number and returns the current class instance.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

function(d) {
  return d.x;
}

<a name="Box.y" href="#Box.y">#</a> Box.y([value]) <>

If value is specified, sets the y axis to the specified function or number and returns the current class instance.

This is a static method of <code>Box</code>, and is chainable with other methods of this Class.

function(d) {
  return d.y;
}

<a name="Circle"></a>

Circle <>

This is a global class, and extends all of the methods and functionality of <code>Shape</code>.

• Circle ⇐ <code>Shape</code>
  • new Circle()
  • .render([callback]) ↩︎
  • .r([value]) ↩︎

<a name="new_Circle_new" href="#new_Circle_new">#</a> new Circle()

Creates SVG circles based on an array of data.

<a name="Circle.render" href="#Circle.render">#</a> Circle.render([callback]) <>

Draws the circles.

This is a static method of <code>Circle</code>, and is chainable with other methods of this Class.

<a name="Circle.r" href="#Circle.r">#</a> Circle.r([value]) <>

If value is specified, sets the radius accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Circle</code>, and is chainable with other methods of this Class.

function(d) {
  return d.r;
}

<a name="Line"></a>

Line <>

This is a global class, and extends all of the methods and functionality of <code>Shape</code>.

• Line ⇐ <code>Shape</code>
  • new Line()
  • .render([callback]) ↩︎
  • .curve([value]) ↩︎
  • .defined([value]) ↩︎

<a name="new_Line_new" href="#new_Line_new">#</a> new Line()

Creates SVG lines based on an array of data.

<a name="Line.render" href="#Line.render">#</a> Line.render([callback]) <>

Draws the lines.

This is a static method of <code>Line</code>, and is chainable with other methods of this Class.

<a name="Line.curve" href="#Line.curve">#</a> Line.curve([value]) <>

If value is specified, sets the area curve to the specified string and returns the current class instance. If value is not specified, returns the current area curve.

This is a static method of <code>Line</code>, and is chainable with other methods of this Class.

<a name="Line.defined" href="#Line.defined">#</a> Line.defined([value]) <>

If value is specified, sets the defined accessor to the specified function and returns the current class instance. If value is not specified, returns the current defined accessor.

This is a static method of <code>Line</code>, and is chainable with other methods of this Class.

<a name="Path"></a>

Path <>

This is a global class, and extends all of the methods and functionality of <code>Shape</code>.

• Path ⇐ <code>Shape</code>
  • new Path()
  • .render([callback]) ↩︎
  • .d([value]) ↩︎

<a name="new_Path_new" href="#new_Path_new">#</a> new Path()

Creates SVG Paths based on an array of data.

<a name="Path.render" href="#Path.render">#</a> Path.render([callback]) <>

Draws the paths.

This is a static method of <code>Path</code>, and is chainable with other methods of this Class.

<a name="Path.d" href="#Path.d">#</a> Path.d([value]) <>

If value is specified, sets the "d" attribute accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Path</code>, and is chainable with other methods of this Class.

function(d) {
  return d.path;
}

<a name="Rect"></a>

Rect <>

This is a global class, and extends all of the methods and functionality of <code>Shape</code>.

• Rect ⇐ <code>Shape</code>
  • new Rect()
  • .render([callback]) ↩︎
  • .height([value]) ↩︎
  • .width([value]) ↩︎

<a name="new_Rect_new" href="#new_Rect_new">#</a> new Rect()

Creates SVG rectangles based on an array of data. See this example for help getting started using the rectangle generator.

<a name="Rect.render" href="#Rect.render">#</a> Rect.render([callback]) <>

Draws the rectangles.

This is a static method of <code>Rect</code>, and is chainable with other methods of this Class.

<a name="Rect.height" href="#Rect.height">#</a> Rect.height([value]) <>

If value is specified, sets the height accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Rect</code>, and is chainable with other methods of this Class.

function(d) {
  return d.height;
}

<a name="Rect.width" href="#Rect.width">#</a> Rect.width([value]) <>

If value is specified, sets the width accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Rect</code>, and is chainable with other methods of this Class.

function(d) {
  return d.width;
}

<a name="Shape"></a>

Shape <>

This is a global class, and extends all of the methods and functionality of <code>BaseClass</code>.

• Shape ⇐ <code>BaseClass</code>
  • new Shape()
  • .render([callback]) ↩︎
  • .active([value]) ↩︎
  • .activeOpacity(value) ↩︎
  • .activeStyle(value) ↩︎
  • .ariaLabel(value) ↩︎
  • .backgroundImage([value]) ↩︎
  • .data([data]) ↩︎
  • .discrete(value) ↩︎
  • .duration([ms]) ↩︎
  • .fill([value]) ↩︎
  • .fillOpacity([value]) ↩︎
  • .hover([value]) ↩︎
  • .hoverStyle(value) ↩︎
  • .hoverOpacity([value]) ↩︎
  • .hitArea([bounds]) ↩︎
  • .id([value]) ↩︎
  • .label([value]) ↩︎
  • .labelBounds([bounds]) ↩︎
  • .labelConfig([value]) ↩︎
  • .opacity([value]) ↩︎
  • .pointerEvents([value]) ↩︎
  • .role(value) ↩︎
  • .rotate([value]) ↩︎
  • .rx([value]) ↩︎
  • .ry([value]) ↩︎
  • .scale([value]) ↩︎
  • .select([selector]) ↩︎
  • .shapeRendering([value]) ↩︎
  • .sort([value]) ↩︎
  • .stroke([value]) ↩︎
  • .strokeDasharray([value]) ↩︎
  • .strokeLinecap([value]) ↩︎
  • .strokeOpacity([value]) ↩︎
  • .strokeWidth([value]) ↩︎
  • .textAnchor([value]) ↩︎
  • .texture([value]) ↩︎
  • .textureDefault([value]) ↩︎
  • .vectorEffect([value]) ↩︎
  • .verticalAlign([value]) ↩︎
  • .x([value]) ↩︎
  • .y([value]) ↩︎

<a name="new_Shape_new" href="#new_Shape_new">#</a> new Shape()

An abstracted class for generating shapes.

<a name="Shape.render" href="#Shape.render">#</a> Shape.render([callback]) <>

Renders the current Shape to the page. If a callback is specified, it will be called once the shapes are done drawing.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.active" href="#Shape.active">#</a> Shape.active([value]) <>

If value is specified, sets the highlight accessor to the specified function and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.activeOpacity" href="#Shape.activeOpacity">#</a> Shape.activeOpacity(value) <>

When shapes are active, this is the opacity of any shape that is not active.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.activeStyle" href="#Shape.activeStyle">#</a> Shape.activeStyle(value) <>

The style to apply to active shapes.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.ariaLabel" href="#Shape.ariaLabel">#</a> Shape.ariaLabel(value) <>

If value is specified, sets the aria-label attribute to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.backgroundImage" href="#Shape.backgroundImage">#</a> Shape.backgroundImage([value]) <>

If value is specified, sets the background-image accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.data" href="#Shape.data">#</a> Shape.data([data]) <>

If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array. A shape will be drawn for each object in the array.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.discrete" href="#Shape.discrete">#</a> Shape.discrete(value) <>

Determines if either the X or Y position is discrete along a Line, which helps in determining the nearest data point on a line for a hit area event.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.duration" href="#Shape.duration">#</a> Shape.duration([ms]) <>

If ms is specified, sets the animation duration to the specified number and returns the current class instance. If ms is not specified, returns the current animation duration.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.fill" href="#Shape.fill">#</a> Shape.fill([value]) <>

If value is specified, sets the fill accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.fillOpacity" href="#Shape.fillOpacity">#</a> Shape.fillOpacity([value]) <>

Defines the "fill-opacity" attribute for the shapes.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.hover" href="#Shape.hover">#</a> Shape.hover([value]) <>

If value is specified, sets the highlight accessor to the specified function and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.hoverStyle" href="#Shape.hoverStyle">#</a> Shape.hoverStyle(value) <>

The style to apply to hovered shapes.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.hoverOpacity" href="#Shape.hoverOpacity">#</a> Shape.hoverOpacity([value]) <>

If value is specified, sets the hover opacity to the specified function and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.hitArea" href="#Shape.hitArea">#</a> Shape.hitArea([bounds]) <>

If bounds is specified, sets the mouse hit area to the specified function and returns the current class instance. If bounds is not specified, returns the current mouse hit area accessor.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

function(d, i, shape) {
  return {
    "width": shape.width,
    "height": shape.height,
    "x": -shape.width / 2,
    "y": -shape.height / 2
  };
}

<a name="Shape.id" href="#Shape.id">#</a> Shape.id([value]) <>

If value is specified, sets the id accessor to the specified function and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.label" href="#Shape.label">#</a> Shape.label([value]) <>

If value is specified, sets the label accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.labelBounds" href="#Shape.labelBounds">#</a> Shape.labelBounds([bounds]) <>

If bounds is specified, sets the label bounds to the specified function and returns the current class instance. If bounds is not specified, returns the current inner bounds accessor.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

function(d, i, shape) {
  return {
    "width": shape.width,
    "height": shape.height,
    "x": -shape.width / 2,
    "y": -shape.height / 2
  };
}

<a name="Shape.labelConfig" href="#Shape.labelConfig">#</a> Shape.labelConfig([value]) <>

A pass-through to the config method of the TextBox class used to create a shape's labels.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.opacity" href="#Shape.opacity">#</a> Shape.opacity([value]) <>

If value is specified, sets the opacity accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.pointerEvents" href="#Shape.pointerEvents">#</a> Shape.pointerEvents([value]) <>

If value is specified, sets the pointerEvents accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.role" href="#Shape.role">#</a> Shape.role(value) <>

If value is specified, sets the role attribute to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.rotate" href="#Shape.rotate">#</a> Shape.rotate([value]) <>

If value is specified, sets the rotate accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.rx" href="#Shape.rx">#</a> Shape.rx([value]) <>

Defines the "rx" attribute for the shapes.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.ry" href="#Shape.ry">#</a> Shape.ry([value]) <>

Defines the "rx" attribute for the shapes.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.scale" href="#Shape.scale">#</a> Shape.scale([value]) <>

If value is specified, sets the scale accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.select" href="#Shape.select">#</a> Shape.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.shapeRendering" href="#Shape.shapeRendering">#</a> Shape.shapeRendering([value]) <>

If value is specified, sets the shape-rendering accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

function(d) {
  return d.x;
}

<a name="Shape.sort" href="#Shape.sort">#</a> Shape.sort([value]) <>

If value is specified, sets the sort comparator to the specified function and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.stroke" href="#Shape.stroke">#</a> Shape.stroke([value]) <>

If value is specified, sets the stroke accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.strokeDasharray" href="#Shape.strokeDasharray">#</a> Shape.strokeDasharray([value]) <>

Defines the "stroke-dasharray" attribute for the shapes.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.strokeLinecap" href="#Shape.strokeLinecap">#</a> Shape.strokeLinecap([value]) <>

Defines the "stroke-linecap" attribute for the shapes. Accepted values are "butt", "round", and "square".

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.strokeOpacity" href="#Shape.strokeOpacity">#</a> Shape.strokeOpacity([value]) <>

Defines the "stroke-opacity" attribute for the shapes.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.strokeWidth" href="#Shape.strokeWidth">#</a> Shape.strokeWidth([value]) <>

If value is specified, sets the stroke-width accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.textAnchor" href="#Shape.textAnchor">#</a> Shape.textAnchor([value]) <>

If value is specified, sets the text-anchor accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.texture" href="#Shape.texture">#</a> Shape.texture([value]) <>

Defines the texture used inside of each shape. This uses the textures.js package, and expects either a simple string ("lines" or "circles") or a more complex Object containing the various properties of the texture (ie. {texture: "lines", orientation: "3/8", stroke: "darkorange"}). If multiple textures are necessary, provide an accsesor Function that returns the correct String/Object for each given data point and index.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.textureDefault" href="#Shape.textureDefault">#</a> Shape.textureDefault([value]) <>

A series of global texture methods to be used for all textures (ie. {stroke: "darkorange", strokeWidth: 2}).

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.vectorEffect" href="#Shape.vectorEffect">#</a> Shape.vectorEffect([value]) <>

If value is specified, sets the vector-effect accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.verticalAlign" href="#Shape.verticalAlign">#</a> Shape.verticalAlign([value]) <>

If value is specified, sets the vertical alignment accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

<a name="Shape.x" href="#Shape.x">#</a> Shape.x([value]) <>

If value is specified, sets the x accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

function(d) {
  return d.x;
}

<a name="Shape.y" href="#Shape.y">#</a> Shape.y([value]) <>

If value is specified, sets the y accessor to the specified function or number and returns the current class instance.

This is a static method of <code>Shape</code>, and is chainable with other methods of this Class.

function(d) {
  return d.y;
}

<a name="Whisker"></a>

Whisker <>

This is a global class, and extends all of the methods and functionality of <code>BaseClass</code>.

• Whisker ⇐ <code>BaseClass</code>
  • new Whisker()
  • .render([callback]) ↩︎
  • .active([value]) ↩︎
  • .data([data]) ↩︎
  • .endpoint(_) ↩︎
  • .endpointConfig([value]) ↩︎
  • .hover([value]) ↩︎
  • .length([value]) ↩︎
  • .lineConfig([value]) ↩︎
  • .orient([value]) ↩︎
  • .select([selector]) ↩︎
  • .x([value]) ↩︎
  • .y([value]) ↩︎

<a name="new_Whisker_new" href="#new_Whisker_new">#</a> new Whisker()

Creates SVG whisker based on an array of data.

<a name="Whisker.render" href="#Whisker.render">#</a> Whisker.render([callback]) <>

Draws the whisker.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.active" href="#Whisker.active">#</a> Whisker.active([value]) <>

Sets the highlight accessor to the Shape class's active function.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.data" href="#Whisker.data">#</a> Whisker.data([data]) <>

If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.endpoint" href="#Whisker.endpoint">#</a> Whisker.endpoint(_) <>

If value is specified, sets the endpoint accessor to the specified function or string and returns the current class instance.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.endpointConfig" href="#Whisker.endpointConfig">#</a> Whisker.endpointConfig([value]) <>

If value is specified, sets the config method for each endpoint and returns the current class instance.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.hover" href="#Whisker.hover">#</a> Whisker.hover([value]) <>

Sets the highlight accessor to the Shape class's hover function.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.length" href="#Whisker.length">#</a> Whisker.length([value]) <>

If value is specified, sets the length accessor for whisker and returns the current class instance.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.lineConfig" href="#Whisker.lineConfig">#</a> Whisker.lineConfig([value]) <>

If value is specified, sets the config method for line shape and returns the current class instance.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.orient" href="#Whisker.orient">#</a> Whisker.orient([value]) <>

If value is specified, sets the orientation to the specified value. If value is not specified, returns the current orientation.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.select" href="#Whisker.select">#</a> Whisker.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

<a name="Whisker.x" href="#Whisker.x">#</a> Whisker.x([value]) <>

If value is specified, sets the x axis to the specified function or number and returns the current class instance.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

function(d) {
  return d.x;
}

<a name="Whisker.y" href="#Whisker.y">#</a> Whisker.y([value]) <>

If value is specified, sets the y axis to the specified function or number and returns the current class instance.

This is a static method of <code>Whisker</code>, and is chainable with other methods of this Class.

function(d) {
  return d.y;
}

<a name="largestRect"></a>

d3plus.largestRect(poly, [options]) <>

An angle of zero means that the longer side of the polygon (the width) will be aligned with the x axis. An angle of 90 and/or -90 means that the longer side of the polygon (the width) will be aligned with the y axis. The value can be a number between -90 and 90 specifying the angle of rotation of the polygon, a string which is parsed to a number, or an array of numbers specifying the possible rotations of the polygon.

This is a global function. Author: Daniel Smilkov [dsmilkov@gmail.com]

<a name="lineIntersection"></a>

d3plus.lineIntersection(p1, q1, p2, q2) <>

Finds the intersection point (if there is one) of the lines p1q1 and p2q2.

This is a global function.

<a name="path2polygon"></a>

d3plus.path2polygon(path, [segmentLength]) <>

Transforms a path string into an Array of points.

This is a global function.

<a name="pointDistance"></a>

d3plus.pointDistance(p1, p2) <>

Calculates the pixel distance between two points.

This is a global function.

<a name="pointDistanceSquared"></a>

d3plus.pointDistanceSquared(p1, p2) <>

Returns the squared euclidean distance between two points.

This is a global function.

<a name="pointRotate"></a>

d3plus.pointRotate(p, alpha, [origin]) <>

Rotates a point around a given origin.

This is a global function.

<a name="polygonInside"></a>

d3plus.polygonInside(polyA, polyB) <>

Checks if one polygon is inside another polygon.

This is a global function.

<a name="polygonRayCast"></a>

d3plus.polygonRayCast(poly, origin, [alpha]) <>

Gives the two closest intersection points between a ray cast from a point inside a polygon. The two points should lie on opposite sides of the origin.

This is a global function. Returns: <code>Array</code> - An array containing two values, the closest point on the left and the closest point on the right. If either point cannot be found, that value will be null.

<a name="polygonRotate"></a>

d3plus.polygonRotate(poly, alpha, [origin]) <>

Rotates a point around a given origin.

This is a global function.

<a name="segmentBoxContains"></a>

d3plus.segmentBoxContains(s1, s2, p) <>

Checks whether a point is inside the bounding box of a line segment.

This is a global function.

<a name="segmentsIntersect"></a>

d3plus.segmentsIntersect(p1, q1, p2, q2) <>

Checks whether the line segments p1q1 && p2q2 intersect.

This is a global function.

<a name="shapeEdgePoint"></a>

d3plus.shapeEdgePoint(angle, distance) <>

Calculates the x/y position of a point at the edge of a shape, from the center of the shape, given a specified pixel distance and radian angle.

This is a global function. Returns: <code>String</code> - [shape = "circle"] The type of shape, which can be either "circle" or "square".

<a name="largestRect"></a>

d3plus.largestRect(poly, [tolerance], [highestQuality]) <>

Simplifies the points of a polygon using both the Ramer-Douglas-Peucker algorithm and basic distance-based simplification. Adapted to an ES6 module from the excellent Simplify.js.

This is a global function. Author: Vladimir Agafonkin

<a name="LargestRect"></a>

LargestRect <>

The returned Object of the largestRect function.

This is a global typedef. Properties

_{Documentation generated on Tue, 23 Apr 2024 18:45:44 GMT}