d3plus-shape
Version:
Fancy SVG shapes for visualizations
1,247 lines (616 loc) • 68.8 kB
Markdown
# d3plus-shape
Fancy SVG shapes for visualizations
## Installing
If using npm, `npm install d3plus-shape`. Otherwise, you can download the [latest release from GitHub](https://github.com/d3plus/d3plus-shape/releases/latest) or load from a [CDN](https://cdn.jsdelivr.net/npm/d3plus-shape@1).
```js
import modules from "d3plus-shape";
```
d3plus-shape can be loaded as a standalone library or bundled as part of [D3plus](https://github.com/d3plus/d3plus). ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3plus` global is exported:
```html
<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](https://d3plus.org/), which includes a collection of example visualizations using [d3plus-react](https://github.com/d3plus/d3plus-react/). These examples are powered by the [d3plus-storybook](https://github.com/d3plus/d3plus-storybook/) repo, and PRs are always welcome. :beers:
## API Reference
#####
* [Image](#Image)
* [Area](#Area)
* [Bar](#Bar)
* [Box](#Box)
* [Circle](#Circle)
* [Line](#Line)
* [Path](#Path)
* [Rect](#Rect)
* [Shape](#Shape)
* [Whisker](#Whisker)
#####
* [largestRect](#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](#lineIntersection) - Finds the intersection point (if there is one) of the lines p1q1 and p2q2.
* [path2polygon](#path2polygon) - Transforms a path string into an Array of points.
* [pointDistance](#pointDistance) - Calculates the pixel distance between two points.
* [pointDistanceSquared](#pointDistanceSquared) - Returns the squared euclidean distance between two points.
* [pointRotate](#pointRotate) - Rotates a point around a given origin.
* [polygonInside](#polygonInside) - Checks if one polygon is inside another polygon.
* [polygonRayCast](#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](#polygonRotate) - Rotates a point around a given origin.
* [segmentBoxContains](#segmentBoxContains) - Checks whether a point is inside the bounding box of a line segment.
* [segmentsIntersect](#segmentsIntersect) - Checks whether the line segments p1q1 && p2q2 intersect.
* [shapeEdgePoint](#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](#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](http://mourner.github.io/simplify-js/).
#####
* [LargestRect](#LargestRect) - The returned Object of the largestRect function.
---
<a name="Image"></a>
#### **Image** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L6)
This is a global class.
* [Image](#Image)
* [new Image()](#new_Image_new)
* [.render([*callback*])](#Image.render) ↩︎
* [.data([*data*])](#Image.data) ↩︎
* [.duration([*ms*])](#Image.duration) ↩︎
* [.height([*value*])](#Image.height) ↩︎
* [.id([*value*])](#Image.id) ↩︎
* [.opacity([*value*])](#Image.opacity) ↩︎
* [.pointerEvents([*value*])](#Image.pointerEvents) ↩︎
* [.select([*selector*])](#Image.select) ↩︎
* [.url([*value*])](#Image.url) ↩︎
* [.width([*value*])](#Image.width) ↩︎
* [.x([*value*])](#Image.x) ↩︎
* [.y([*value*])](#Image.y) ↩︎
<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
```js
var data = {"url": "file.png", "width": "100", "height": "50"};
```
passed to the generator
```js
new Image().data([data]).render();
```
creates the following
```js
<image class="d3plus-Image" opacity="1" href="file.png" width="100" height="50" x="0" y="0"></image>
```
this is shorthand for the following
```js
image().data([data])();
```
which also allows a post-draw callback function
```js
image().data([data])(function() { alert("draw complete!"); })
```
<a name="Image.render" href="#Image.render">#</a> Image.**render**([*callback*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L46)
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>](#Image), and is chainable with other methods of this Class.
<a name="Image.data" href="#Image.data">#</a> Image.**data**([*data*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L110)
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>](#Image), and is chainable with other methods of this Class.
<a name="Image.duration" href="#Image.duration">#</a> Image.**duration**([*ms*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L120)
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>](#Image), and is chainable with other methods of this Class.
<a name="Image.height" href="#Image.height">#</a> Image.**height**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L134)
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>](#Image), and is chainable with other methods of this Class.
```js
function(d) {
return d.height;
}
```
<a name="Image.id" href="#Image.id">#</a> Image.**id**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L148)
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>](#Image), and is chainable with other methods of this Class.
```js
function(d) {
return d.id;
}
```
<a name="Image.opacity" href="#Image.opacity">#</a> Image.**opacity**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L158)
Sets the opacity of the image.
This is a static method of [<code>Image</code>](#Image), and is chainable with other methods of this Class.
<a name="Image.pointerEvents" href="#Image.pointerEvents">#</a> Image.**pointerEvents**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L168)
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>](#Image), and is chainable with other methods of this Class.
<a name="Image.select" href="#Image.select">#</a> Image.**select**([*selector*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L178)
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>](#Image), and is chainable with other methods of this Class.
<a name="Image.url" href="#Image.url">#</a> Image.**url**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L192)
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>](#Image), and is chainable with other methods of this Class.
```js
function(d) {
return d.url;
}
```
<a name="Image.width" href="#Image.width">#</a> Image.**width**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L206)
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>](#Image), and is chainable with other methods of this Class.
```js
function(d) {
return d.width;
}
```
<a name="Image.x" href="#Image.x">#</a> Image.**x**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L220)
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>](#Image), and is chainable with other methods of this Class.
```js
function(d) {
return d.x || 0;
}
```
<a name="Image.y" href="#Image.y">#</a> Image.**y**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Image.js#L234)
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>](#Image), and is chainable with other methods of this Class.
```js
function(d) {
return d.y || 0;
}
```
---
<a name="Area"></a>
#### **Area** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L12)
This is a global class, and extends all of the methods and functionality of [<code>Shape</code>](#Shape).
* [Area](#Area) ⇐ [<code>Shape</code>](#Shape)
* [new Area()](#new_Area_new)
* [.render([*callback*])](#Area.render) ↩︎
* [.curve([*value*])](#Area.curve) ↩︎
* [.defined([*value*])](#Area.defined) ↩︎
* [.x([*value*])](#Area.x) ↩︎
* [.x0([*value*])](#Area.x0) ↩︎
* [.x1([*value*])](#Area.x1) ↩︎
* [.y([*value*])](#Area.y) ↩︎
* [.y0([*value*])](#Area.y0) ↩︎
* [.y1([*value*])](#Area.y1) ↩︎
<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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L113)
Draws the area polygons.
This is a static method of [<code>Area</code>](#Area), and is chainable with other methods of this Class.
<a name="Area.curve" href="#Area.curve">#</a> Area.**curve**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L166)
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>](#Area), and is chainable with other methods of this Class.
<a name="Area.defined" href="#Area.defined">#</a> Area.**defined**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L176)
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>](#Area), and is chainable with other methods of this Class.
<a name="Area.x" href="#Area.x">#</a> Area.**x**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L186)
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>](#Area), and is chainable with other methods of this Class.
<a name="Area.x0" href="#Area.x0">#</a> Area.**x0**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L199)
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>](#Area), and is chainable with other methods of this Class.
<a name="Area.x1" href="#Area.x1">#</a> Area.**x1**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L212)
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>](#Area), and is chainable with other methods of this Class.
<a name="Area.y" href="#Area.y">#</a> Area.**y**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L222)
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>](#Area), and is chainable with other methods of this Class.
<a name="Area.y0" href="#Area.y0">#</a> Area.**y0**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L235)
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>](#Area), and is chainable with other methods of this Class.
<a name="Area.y1" href="#Area.y1">#</a> Area.**y1**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Area.js#L248)
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>](#Area), and is chainable with other methods of this Class.
---
<a name="Bar"></a>
#### **Bar** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Bar.js#L5)
This is a global class, and extends all of the methods and functionality of [<code>Shape</code>](#Shape).
* [Bar](#Bar) ⇐ [<code>Shape</code>](#Shape)
* [new Bar()](#new_Bar_new)
* [.render([*callback*])](#Bar.render) ↩︎
* [.height([*value*])](#Bar.height) ↩︎
* [.width([*value*])](#Bar.width) ↩︎
* [.x0([*value*])](#Bar.x0) ↩︎
* [.x1([*value*])](#Bar.x1) ↩︎
* [.y0([*value*])](#Bar.y0) ↩︎
* [.y1([*value*])](#Bar.y1) ↩︎
<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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Bar.js#L45)
Draws the bars.
This is a static method of [<code>Bar</code>](#Bar), and is chainable with other methods of this Class.
<a name="Bar.height" href="#Bar.height">#</a> Bar.**height**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Bar.js#L164)
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>](#Bar), and is chainable with other methods of this Class.
```js
function(d) {
return d.height;
}
```
<a name="Bar.width" href="#Bar.width">#</a> Bar.**width**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Bar.js#L178)
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>](#Bar), and is chainable with other methods of this Class.
```js
function(d) {
return d.width;
}
```
<a name="Bar.x0" href="#Bar.x0">#</a> Bar.**x0**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Bar.js#L188)
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>](#Bar), and is chainable with other methods of this Class.
<a name="Bar.x1" href="#Bar.x1">#</a> Bar.**x1**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Bar.js#L201)
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>](#Bar), and is chainable with other methods of this Class.
<a name="Bar.y0" href="#Bar.y0">#</a> Bar.**y0**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Bar.js#L211)
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>](#Bar), and is chainable with other methods of this Class.
<a name="Bar.y1" href="#Bar.y1">#</a> Bar.**y1**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Bar.js#L224)
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>](#Bar), and is chainable with other methods of this Class.
---
<a name="Box"></a>
#### **Box** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L13)
This is a global class, and extends all of the methods and functionality of <code>BaseClass</code>.
* [Box](#Box) ⇐ <code>BaseClass</code>
* [new Box()](#new_Box_new)
* [.render([*callback*])](#Box.render) ↩︎
* [.active([*value*])](#Box.active) ↩︎
* [.data([*data*])](#Box.data) ↩︎
* [.hover([*value*])](#Box.hover) ↩︎
* [.medianConfig([*value*])](#Box.medianConfig) ↩︎
* [.orient([*value*])](#Box.orient) ↩︎
* [.outlier(_)](#Box.outlier) ↩︎
* [.outlierConfig([*value*])](#Box.outlierConfig) ↩︎
* [.rectConfig([*value*])](#Box.rectConfig) ↩︎
* [.rectWidth([*value*])](#Box.rectWidth) ↩︎
* [.select([*selector*])](#Box.select) ↩︎
* [.whiskerConfig([*value*])](#Box.whiskerConfig) ↩︎
* [.whiskerMode([*value*])](#Box.whiskerMode) ↩︎
* [.x([*value*])](#Box.x) ↩︎
* [.y([*value*])](#Box.y) ↩︎
<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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L62)
Draws the Box.
This is a static method of [<code>Box</code>](#Box), and is chainable with other methods of this Class.
<a name="Box.active" href="#Box.active">#</a> Box.**active**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L228)
Sets the highlight accessor to the Shape class's active function.
This is a static method of [<code>Box</code>](#Box), and is chainable with other methods of this Class.
<a name="Box.data" href="#Box.data">#</a> Box.**data**([*data*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L241)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.hover" href="#Box.hover">#</a> Box.**hover**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L251)
Sets the highlight accessor to the Shape class's hover function.
This is a static method of [<code>Box</code>](#Box), and is chainable with other methods of this Class.
<a name="Box.medianConfig" href="#Box.medianConfig">#</a> Box.**medianConfig**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L264)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.orient" href="#Box.orient">#</a> Box.**orient**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L274)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.outlier" href="#Box.outlier">#</a> Box.**outlier**(_) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L284)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.outlierConfig" href="#Box.outlierConfig">#</a> Box.**outlierConfig**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L294)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.rectConfig" href="#Box.rectConfig">#</a> Box.**rectConfig**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L304)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.rectWidth" href="#Box.rectWidth">#</a> Box.**rectWidth**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L318)
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>](#Box), and is chainable with other methods of this Class.
```js
function(d) {
return d.width;
}
```
<a name="Box.select" href="#Box.select">#</a> Box.**select**([*selector*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L328)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.whiskerConfig" href="#Box.whiskerConfig">#</a> Box.**whiskerConfig**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L338)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.whiskerMode" href="#Box.whiskerMode">#</a> Box.**whiskerMode**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L348)
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>](#Box), and is chainable with other methods of this Class.
<a name="Box.x" href="#Box.x">#</a> Box.**x**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L362)
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>](#Box), and is chainable with other methods of this Class.
```js
function(d) {
return d.x;
}
```
<a name="Box.y" href="#Box.y">#</a> Box.**y**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Box.js#L376)
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>](#Box), and is chainable with other methods of this Class.
```js
function(d) {
return d.y;
}
```
---
<a name="Circle"></a>
#### **Circle** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Circle.js#L5)
This is a global class, and extends all of the methods and functionality of [<code>Shape</code>](#Shape).
* [Circle](#Circle) ⇐ [<code>Shape</code>](#Shape)
* [new Circle()](#new_Circle_new)
* [.render([*callback*])](#Circle.render) ↩︎
* [.r([*value*])](#Circle.r) ↩︎
<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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Circle.js#L47)
Draws the circles.
This is a static method of [<code>Circle</code>](#Circle), and is chainable with other methods of this Class.
<a name="Circle.r" href="#Circle.r">#</a> Circle.**r**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Circle.js#L98)
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>](#Circle), and is chainable with other methods of this Class.
```js
function(d) {
return d.r;
}
```
---
<a name="Line"></a>
#### **Line** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Line.js#L11)
This is a global class, and extends all of the methods and functionality of [<code>Shape</code>](#Shape).
* [Line](#Line) ⇐ [<code>Shape</code>](#Shape)
* [new Line()](#new_Line_new)
* [.render([*callback*])](#Line.render) ↩︎
* [.curve([*value*])](#Line.curve) ↩︎
* [.defined([*value*])](#Line.defined) ↩︎
<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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Line.js#L84)
Draws the lines.
This is a static method of [<code>Line</code>](#Line), and is chainable with other methods of this Class.
<a name="Line.curve" href="#Line.curve">#</a> Line.**curve**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Line.js#L189)
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>](#Line), and is chainable with other methods of this Class.
<a name="Line.defined" href="#Line.defined">#</a> Line.**defined**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Line.js#L199)
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>](#Line), and is chainable with other methods of this Class.
---
<a name="Path"></a>
#### **Path** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Path.js#L7)
This is a global class, and extends all of the methods and functionality of [<code>Shape</code>](#Shape).
* [Path](#Path) ⇐ [<code>Shape</code>](#Shape)
* [new Path()](#new_Path_new)
* [.render([*callback*])](#Path.render) ↩︎
* [.d([*value*])](#Path.d) ↩︎
<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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Path.js#L50)
Draws the paths.
This is a static method of [<code>Path</code>](#Path), and is chainable with other methods of this Class.
<a name="Path.d" href="#Path.d">#</a> Path.**d**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Path.js#L88)
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>](#Path), and is chainable with other methods of this Class.
```js
function(d) {
return d.path;
}
```
---
<a name="Rect"></a>
#### **Rect** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Rect.js#L5)
This is a global class, and extends all of the methods and functionality of [<code>Shape</code>](#Shape).
* [Rect](#Rect) ⇐ [<code>Shape</code>](#Shape)
* [new Rect()](#new_Rect_new)
* [.render([*callback*])](#Rect.render) ↩︎
* [.height([*value*])](#Rect.height) ↩︎
* [.width([*value*])](#Rect.width) ↩︎
<a name="new_Rect_new" href="#new_Rect_new">#</a> new **Rect**()
Creates SVG rectangles based on an array of data. See [this example](https://d3plus.org/examples/d3plus-shape/getting-started/) for help getting started using the rectangle generator.
<a name="Rect.render" href="#Rect.render">#</a> Rect.**render**([*callback*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Rect.js#L32)
Draws the rectangles.
This is a static method of [<code>Rect</code>](#Rect), and is chainable with other methods of this Class.
<a name="Rect.height" href="#Rect.height">#</a> Rect.**height**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Rect.js#L97)
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>](#Rect), and is chainable with other methods of this Class.
```js
function(d) {
return d.height;
}
```
<a name="Rect.width" href="#Rect.width">#</a> Rect.**width**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Rect.js#L111)
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>](#Rect), and is chainable with other methods of this Class.
```js
function(d) {
return d.width;
}
```
---
<a name="Shape"></a>
#### **Shape** [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L21)
This is a global class, and extends all of the methods and functionality of [<code>BaseClass</code>](https://github.com/d3plus/d3plus-common#BaseClass).
* [Shape](#Shape) ⇐ [<code>BaseClass</code>](https://github.com/d3plus/d3plus-common#BaseClass)
* [new Shape()](#new_Shape_new)
* [.render([*callback*])](#Shape.render) ↩︎
* [.active([*value*])](#Shape.active) ↩︎
* [.activeOpacity(*value*)](#Shape.activeOpacity) ↩︎
* [.activeStyle(*value*)](#Shape.activeStyle) ↩︎
* [.ariaLabel(*value*)](#Shape.ariaLabel) ↩︎
* [.backgroundImage([*value*])](#Shape.backgroundImage) ↩︎
* [.data([*data*])](#Shape.data) ↩︎
* [.discrete(*value*)](#Shape.discrete) ↩︎
* [.duration([*ms*])](#Shape.duration) ↩︎
* [.fill([*value*])](#Shape.fill) ↩︎
* [.fillOpacity([*value*])](#Shape.fillOpacity) ↩︎
* [.hover([*value*])](#Shape.hover) ↩︎
* [.hoverStyle(*value*)](#Shape.hoverStyle) ↩︎
* [.hoverOpacity([*value*])](#Shape.hoverOpacity) ↩︎
* [.hitArea([*bounds*])](#Shape.hitArea) ↩︎
* [.id([*value*])](#Shape.id) ↩︎
* [.label([*value*])](#Shape.label) ↩︎
* [.labelBounds([*bounds*])](#Shape.labelBounds) ↩︎
* [.labelConfig([*value*])](#Shape.labelConfig) ↩︎
* [.opacity([*value*])](#Shape.opacity) ↩︎
* [.pointerEvents([*value*])](#Shape.pointerEvents) ↩︎
* [.role(*value*)](#Shape.role) ↩︎
* [.rotate([*value*])](#Shape.rotate) ↩︎
* [.rx([*value*])](#Shape.rx) ↩︎
* [.ry([*value*])](#Shape.ry) ↩︎
* [.scale([*value*])](#Shape.scale) ↩︎
* [.select([*selector*])](#Shape.select) ↩︎
* [.shapeRendering([*value*])](#Shape.shapeRendering) ↩︎
* [.sort([*value*])](#Shape.sort) ↩︎
* [.stroke([*value*])](#Shape.stroke) ↩︎
* [.strokeDasharray([*value*])](#Shape.strokeDasharray) ↩︎
* [.strokeLinecap([*value*])](#Shape.strokeLinecap) ↩︎
* [.strokeOpacity([*value*])](#Shape.strokeOpacity) ↩︎
* [.strokeWidth([*value*])](#Shape.strokeWidth) ↩︎
* [.textAnchor([*value*])](#Shape.textAnchor) ↩︎
* [.texture([*value*])](#Shape.texture) ↩︎
* [.textureDefault([*value*])](#Shape.textureDefault) ↩︎
* [.vectorEffect([*value*])](#Shape.vectorEffect) ↩︎
* [.verticalAlign([*value*])](#Shape.verticalAlign) ↩︎
* [.x([*value*])](#Shape.x) ↩︎
* [.y([*value*])](#Shape.y) ↩︎
<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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L541)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.active" href="#Shape.active">#</a> Shape.**active**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L705)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.activeOpacity" href="#Shape.activeOpacity">#</a> Shape.**activeOpacity**(*value*) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L724)
When shapes are active, this is the opacity of any shape that is not active.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.activeStyle" href="#Shape.activeStyle">#</a> Shape.**activeStyle**(*value*) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L734)
The style to apply to active shapes.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.ariaLabel" href="#Shape.ariaLabel">#</a> Shape.**ariaLabel**(*value*) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L744)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.backgroundImage" href="#Shape.backgroundImage">#</a> Shape.**backgroundImage**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L756)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.data" href="#Shape.data">#</a> Shape.**data**([*data*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L768)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.discrete" href="#Shape.discrete">#</a> Shape.**discrete**(*value*) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L780)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.duration" href="#Shape.duration">#</a> Shape.**duration**([*ms*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L790)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.fill" href="#Shape.fill">#</a> Shape.**fill**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L802)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.fillOpacity" href="#Shape.fillOpacity">#</a> Shape.**fillOpacity**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L814)
Defines the "fill-opacity" attribute for the shapes.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.hover" href="#Shape.hover">#</a> Shape.**hover**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L826)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.hoverStyle" href="#Shape.hoverStyle">#</a> Shape.**hoverStyle**(*value*) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L845)
The style to apply to hovered shapes.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.hoverOpacity" href="#Shape.hoverOpacity">#</a> Shape.**hoverOpacity**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L855)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.hitArea" href="#Shape.hitArea">#</a> Shape.**hitArea**([*bounds*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L874)
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>](#Shape), and is chainable with other methods of this Class.
```js
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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L884)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.label" href="#Shape.label">#</a> Shape.**label**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L894)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.labelBounds" href="#Shape.labelBounds">#</a> Shape.**labelBounds**([*bounds*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L913)
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>](#Shape), and is chainable with other methods of this Class.
```js
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*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L923)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.opacity" href="#Shape.opacity">#</a> Shape.**opacity**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L933)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.pointerEvents" href="#Shape.pointerEvents">#</a> Shape.**pointerEvents**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L943)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.role" href="#Shape.role">#</a> Shape.**role**(*value*) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L953)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.rotate" href="#Shape.rotate">#</a> Shape.**rotate**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L965)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.rx" href="#Shape.rx">#</a> Shape.**rx**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L975)
Defines the "rx" attribute for the shapes.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.ry" href="#Shape.ry">#</a> Shape.**ry**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L985)
Defines the "rx" attribute for the shapes.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.scale" href="#Shape.scale">#</a> Shape.**scale**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L995)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.select" href="#Shape.select">#</a> Shape.**select**([*selector*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1005)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.shapeRendering" href="#Shape.shapeRendering">#</a> Shape.**shapeRendering**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1019)
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>](#Shape), and is chainable with other methods of this Class.
```js
function(d) {
return d.x;
}
```
<a name="Shape.sort" href="#Shape.sort">#</a> Shape.**sort**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1029)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.stroke" href="#Shape.stroke">#</a> Shape.**stroke**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1039)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.strokeDasharray" href="#Shape.strokeDasharray">#</a> Shape.**strokeDasharray**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1049)
Defines the "stroke-dasharray" attribute for the shapes.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.strokeLinecap" href="#Shape.strokeLinecap">#</a> Shape.**strokeLinecap**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1059)
Defines the "stroke-linecap" attribute for the shapes. Accepted values are `"butt"`, `"round"`, and `"square"`.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.strokeOpacity" href="#Shape.strokeOpacity">#</a> Shape.**strokeOpacity**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1069)
Defines the "stroke-opacity" attribute for the shapes.
This is a static method of [<code>Shape</code>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.strokeWidth" href="#Shape.strokeWidth">#</a> Shape.**strokeWidth**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1079)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.textAnchor" href="#Shape.textAnchor">#</a> Shape.**textAnchor**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1089)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.texture" href="#Shape.texture">#</a> Shape.**texture**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1099)
Defines the texture used inside of each shape. This uses the [textures.js](https://riccardoscalco.it/textures/) 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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.textureDefault" href="#Shape.textureDefault">#</a> Shape.**textureDefault**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1109)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.vectorEffect" href="#Shape.vectorEffect">#</a> Shape.**vectorEffect**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1119)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.verticalAlign" href="#Shape.verticalAlign">#</a> Shape.**verticalAlign**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1129)
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>](#Shape), and is chainable with other methods of this Class.
<a name="Shape.x" href="#Shape.x">#</a> Shape.**x**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1143)
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>](#Shape), and is chainable with other methods of this Class.
```js
function(d) {
return d.x;
}
```
<a name="Shape.y" href="#Shape.y">#</a> Shape.**y**([*value*]) [<>](https://github.com/d3plus/d3plus-shape/blob/master/src/Shape/Shape.js#L1157)
If *value* is specified, sets the y accessor to the spe