d3plus-shape

A javascript library that draws data-driven shapes to DOM using the popular d3 library.

Installing

If you use NPM, npm install d3plus-shape. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom build using Rollup or your preferred bundler. You can also load directly from d3js.org and d3plus.org:

<script src="https://d3js.org/d3.v3.min.js"></script>

<script src="https://d3js.org/d3-array.v0.7.min.js"></script>
<script src="https://d3js.org/d3-collection.v0.1.min.js"></script>
<script src="https://d3js.org/d3-color.v0.3.min.js"></script>
<script src="https://d3js.org/d3-format.v0.5.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.4.min.js"></script>
<script src="https://d3js.org/d3-scale.v0.5.min.js"></script>

<script src="https://d3plus.org/js/d3plus-color.v0.2.min.js"></script>
<script src="https://d3plus.org/js/d3plus-shape.v0.3.min.js"></script>

In a vanilla environment, a d3plus_shape global is exported.

API Reference

rect([data])

Creates SVG rectangles based on an array of data. If data is specified, immediately draws squares based on the specified array and returns this rectangle generator. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method.

Kind: global function

Example (a sample row of data)

var data = {"id": 0, "x": 100, "y": 50, "width": 200, "height": 100};

Example (passed to the generator)

rect([data]);

Example (creates the following)

<g class="d3plus-shape-rect" id="d3plus-shape-rect-0" transform="translate(100,50)">
  <rect width="200" height="100" x="-100" y="-50" fill="black"></rect>
</g>

• rect([data])
  • .data([data])
  • .fill([value])
  • .height([value])
  • .id([value])
  • .innerBounds([bounds])
  • .label([value])
  • .select([selector])
  • .timing([ms])
  • .width([value])
  • .x([value])
  • .y([value])

rect.data([data])

If data is specified, sets the data array to the specified array and returns this rectangle generator. If data is not specified, returns the current data array. A rectangle will be drawn for each object in the array.

Kind: static method of rect

rect.fill([value])

If value is specified, sets the fill accessor to the specified function or string and returns this rectangle generator. If value is not specified, returns the current fill accessor.

Kind: static method of rect

rect.height([value])

If value is specified, sets the height accessor to the specified function or number and returns this rectangle generator. If value is not specified, returns the current height accessor.

Kind: static method of rect

Example

function(d) {
  return d.height;
}

rect.id([value])

If value is specified, sets the id accessor to the specified function and returns this rectangle generator. If value is not specified, returns the current id accessor.

Kind: static method of rect

Example

function(d) {
  return d.id;
}

rect.innerBounds([bounds])

If bounds is specified, sets the inner bounds to the specified function and returns this rectangle generator. If bounds is not specified, returns the current inner bounds accessor.

Kind: static method of rect

Example

function(w, h) {
  return {
    "width": w,
    "height": h,
    "x": -w / 2,
    "y": -h / 2
  };
}
      

rect.label([value])

If value is specified, sets the label accessor to the specified function or string and returns this rectangle generator. If value is not specified, returns the current text accessor, which is undefined by default.

Kind: static method of rect

rect.select([selector])

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns this rectangle generator. If selector is not specified, returns the current SVG container element.

Kind: static method of rect

rect.timing([ms])

If ms is specified, sets the animation timing to the specified number and returns this rectangle generator. If ms is not specified, returns the current animation timing.

Kind: static method of rect

rect.width([value])

If value is specified, sets the width accessor to the specified function or number and returns this rectangle generator. If value is not specified, returns the current width accessor.

Kind: static method of rect

Example

function(d) {
  return d.width;
}

rect.x([value])

If value is specified, sets the x accessor to the specified function or number and returns this rectangle generator. If value is not specified, returns the current x accessor. The number returned should correspond to the horizontal center of the rectangle.

Kind: static method of rect

Example

function(d) {
  return d.x;
}

rect.y([value])

If value is specified, sets the y accessor to the specified function or number and returns this rectangle generator. If value is not specified, returns the current y accessor. The number returned should correspond to the vertical center of the rectangle.

Kind: static method of rect

Example

function(d) {
  return d.y;
}