nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN
Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

@d3fc/d3fc-shape

5.0.19 • Public • Published

d3fc-shape

A collection of SVG/canvas path generators for creating chart series

Main D3FC package

Installing

npm install @d3fc/d3fc-shape

API Reference

All of the exported functions have the same signature, (context) => generator. The context supplied must be an implementation of the subset of Context2D methods as implemented by d3-path (or indeed a Context2D!).

You can then configure the generator by invoking the relevant methods (e.g. generator.x(/* ... */)) as described below. Once suitably configured invoke the generator function itself with the required data (e.g. generator([/* ... */])).

Example usage

SVG

 
import { path } from 'd3-path';
import { shapeCandlestick } from 'd3fc-shape';
 
const ctx = path();
 
const candlestick = shapeCandlestick()
  .x((d, i) => i)
  .open((d) => d.open)
  .high((d) => d.high)
  .low((d) => d.low)
  .close((d) => d.close);
 
d3.select('path')
  .datum([
    { open: 4, high: 5, low: 3, close: 3 }
  ])
  .attr('d', candlestick);
 

Canvas

 
import { shapeCandlestick } from 'd3fc-shape';
 
const ctx = document.querySelector('canvas').getContext('2d');
 
const candlestick = shapeCandlestick()
  .context(ctx)
  .x((d, i) => i)
  .open((d) => d.open)
  .high((d) => d.high)
  .low((d) => d.low)
  .close((d) => d.close);
 
candlestick([
  { open: 4, high: 5, low: 3, close: 3 }
]);
 
ctx.stroke();
 

Bar

# fc.shapeBar(context)

# shapeBar.x(accessorFunc)
# shapeBar.y(accessorFunc)
# shapeBar.width(accessorFunc)
# shapeBar.height(accessorFunc)

The attribute accessor methods available to set the way the bar chart accesses the data. The accessorFunc(datum, index) function is called on each item of the data, and returns the relevant value for the relevant attribute for that item.

# shapeBar.horizontalAlign(alignment)

alignment is one of: left, right or center (default)

# shapeBar.verticalAlign(alignment)

alignment is one of: bottom, top or center (default)

Boxplot

# fc.shapeBoxPlot(context)

# shapeBoxPlot.value(accessorFunc)
# shapeBoxPlot.median(accessorFunc)
# shapeBoxPlot.upperQuartile(accessorFunc)
# shapeBoxPlot.lowerQuartile(accessorFunc)
# shapeBoxPlot.high(accessorFunc)
# shapeBoxPlot.low(accessorFunc)
# shapeBoxPlot.width(accessorFunc)

The attribute accessor methods available to set the way the bar chart accesses the data. The accessorFunc(datum, index) function is called on each item of the data, and returns the relevant value for the relevant attribute for that item.

# shapeBoxPlot.cap(accessorFunc)

The accessorFunc(item, index) function is called on each item of the data, and returns the proprtion of the box width that the caps width should be.

# shapeBoxPlot.orient(orientation)

Orientation of the chart. Either horizontal (default) or vertical

Candlestick

# fc.shapeCandlestick(context)

# shapeCandlestick.x(accessorFunc)
# shapeCandlestick.open(accessorFunc)
# shapeCandlestick.high(accessorFunc)
# shapeCandlestick.low(accessorFunc)
# shapeCandlestick.close(accessorFunc)
# shapeCandlestick.width(accessorFunc)

The attribute accessor methods available to set the way the bar chart accesses the data. The accessorFunc(datum, index) function is called on each item of the data, and returns the relevant value for the relevant attribute for that item.

Error Bar

# fc.shapeErrorBar(context)

# shapeErrorBar.value(accessorFunc)
# shapeErrorBar.high(accessorFunc)
# shapeErrorBar.low(accessorFunc)
# shapeErrorBar.width(accessorFunc)

The attribute accessor methods available to set the way the bar chart accesses the data. The accessorFunc(datum, index) function is called on each item of the data, and returns the relevant value for the relevant attribute for that item.

# shapeErrorBar.orient(orientation)

Orientation of the chart. Either horizontal (default) or vertical

OHLC

# fc.shapeOhlc(context)

# shapeOhlc.x(accessorFunc)
# shapeOhlc.open(accessorFunc)
# shapeOhlc.high(accessorFunc)
# shapeOhlc.low(accessorFunc)
# shapeOhlc.close(accessorFunc)
# shapeOhlc.width(accessorFunc)

The attribute accessor methods available to set the way the bar chart accesses the data. The accessorFunc(datum, index) function is called on each item of the data, and returns the relevant value for the relevant attribute for that item.

# shapeOhlc.orient(orientation)

Orientation of the chart. Either horizontal (default) or vertical

Install

npm i @d3fc/d3fc-shape

DownloadsWeekly Downloads

1,471

Version

5.0.19

License

MIT

Unpacked Size

334 kB

Total Files

19

Last publish

Collaborators

  • avatar
  • avatar
  • avatar