d2bSVG Bar

Local Image

# d2b.svgBar()

Constructs a new bar generator with the default settings. The purpose of this module is to provide a common graph API used in other types of graphs (e.g. area, line, bar).

When using the d2b-bar generator you can draw multiple bar graphs onto each element in the selection. This is shown in the data example below.

# bar(context)

Render the bar(s) to the given context, which may be either a d3-selection of SVG containers (either SVG or G elements) or a corresponding d3-transition.

Before applying the d2b-bar generator, you should join the data to the selected element(s) using selection.data or selection.datum. Here is the default data format.

var bar = d2b.svgBar();

var datum = [
  {
    label: 'Bar Graph 1',
    values: [
      {x: 1, y: 18},
      {x: 2, y: 10},
      {x: 3, y: 26},
      {x: 4, y: 35},
      {x: 5, y: 14},
    ]
  },
  {
    label: 'Bar Graph 2',
    values: [
      {x: 1, y: 13},
      {x: 2, y: 26},
      {x: 3, y: 41},
      {x: 4, y: 14},
      {x: 5, y: 36},
    ]
  }
];

d3.select('.chart')
    .datum(datum)
    .call(bar);

# bar.type()

Returns the string bar.

# bar.x([x])

If x is specified, sets the x scale to the specified d3-scale and returns the bar generator. If x is not specified, returns the current x scale, which defaults to a d3.scaleLinear().

# bar.y([y])

If y is specified, sets the y scale to the specified d3-scale and returns the bar generator. If y is not specified, returns the current y scale, which defaults to a d3.scaleLinear().

# bar.annotation([d3-annotation])

If d3-annotation is specified, sets the annotation generator to the specified d3-annotation and returns the bar generator. If d3-annotation is not specified, returns the current annotation generator, which defaults to a d3.annotation().

Datum Level Accessors

When the d2b bar generator is applied to a selection, the following properties will be invoked. The function will be passed the element's bound datum d and the corresponding element index i.

# bar.padding([padding])

If padding is specified, sets the padding to the specified padding-accessor function or number in pixels and returns the bar generator. If padding is not specified, returns the current padding-accessor function, which defaults to () => 0.5.

The padding, is used to pad individual bars within a bar grouping.

# bar.groupPadding([padding])

If padding is specified, sets the padding to the specified group-padding-accessor function or number in pixels and returns the bar generator. If padding is not specified, returns the current group-padding-accessor function, which defaults to () => 0.

The groupPadding, is used to pad groups of bars.

# bar.bandwidth([bandwidth])

If bandwidth is specified, sets the bandwidth to the specified bandwidth-accessor function or number in pixels and returns the bar generator. If bandwidth is not specified, returns the current bandwidth-accessor function, which defaults to () => null.

The bandwidth determines the pixel width that a bar grouping can occupy. If a null bandwidth is used it will be computed dynamically based on the pixel distance between the closest two bar groups.

# bar.baseline([baseline])

If baseline is specified, sets the baseline to the specified baseline-accessor function or number and returns the bar generator. If baseline is not specified, returns the current baseline-accessor function, which defaults to () => 0.

The baseline is used to determine the origin of a bar or bar stack.

# bar.graphs([graphs])

If graphs is specified, sets the graphs array to the specified accessor function or array and returns the bar generator. If graphs is not specified, returns the current graphs accessor, which defaults to d => d.

Graph Level Accessors

When the d2b bar generator is applied to a selection, the following properties will be invoked for each graph in the graphs array. The function will be passed the graph data d and the corresponding graph index i.

function (d) {
  // Here is what d might contain
  // d => {
  //   label: 'Bar Graph 1',
  //   values: [
  //     {x: 1, y: 18},
  //     {x: 2, y: 10},
  //     {x: 3, y: 26},
  //     {x: 4, y: 35},
  //     {x: 5, y: 14},
  //   ]
  // }
}

.addPropFunctor('orient', 'vertical')

# box.orient([orientation])

If orientation is specified, sets the box-orientation. If orientation is not specified, returns the current box orientation which defaults to 'vertical'. The orientation should be one of 'vertical' or 'horizontal'.

# bar.tooltipGraph([tooltip_graph])

If tooltip_graph is specified, sets the tooltip_graph to the specified accessor function and returns the bar generator. If tooltip_graph is not specified, returns the current tooltip_graph accessor, which defaults to:

  function (d) {
    return d.tooltipGraph;
  }

# bar.shift([shift])

If shift is specified, sets the horizontal shift to the specified accessor function or value and returns the bar generator. If shift is not specified, returns the current shift accessor, which defaults to () => null.

If a null accessor is used this shift will be computed dynamically based on the type of d3-scale being used. If a band scale is used then the shift will be set to half of the scales bandwidth.

# bar.stackBy([stack_by])

If stack_by is specified, sets the stack_by accessor to the specified accessor function and returns the bar generator. If stack_by is not specified, returns the current stack_by accessor, which defaults to () => null.

If the accessor returns falsy then no graph stacking will be performed. If the accessor returns truthy then all graphs in a datum set will be stacked together. A more advanced method of stacking allows to stack specific graphs together, this can be done by using a stack property on the graph and setting the stackBy accessor accordingly. In the example below there will be two graphs stacked together under the key 1, two graphs stacked together under the key 2, and one other graph that is denoted as stack 3.

bar.stackBy(function (d) {
  return d.stack;
});

data = {
  graphs: [
    {
      label: 'Bar Graph 1',
      stack: 1,
      values: []
    },
    {
      label: 'Bar Graph 2',
      stack: 1,
      values: []
    },
    {
      label: 'Bar Graph 3',
      stack: 2,
      values: []
    },
    {
      label: 'Bar Graph 4',
      stack: 2,
      values: []
    },
    {
      label: 'Bar Graph 5',
      stack: 3,
      values: []
    }
  ]
}

# bar.key([key])

If key is specified, sets the graph key accessor to the specified accessor function and returns the bar generator. If key is not specified, returns the current key accessor, which defaults to (d) => d.label.

If you are transitioning from one data set to another the key function is useful in making sure the proper graphs get updated to their corresponding values.

# bar.color([color])

If color is specified, sets the color accessor to the specified accessor function and returns the bar generator. If color is not specified, returns the current color accessor, which defaults to:

// define d3 color scale that will be used in the accessor
var color = d3.scaleOrdinal(d3.schemeCategory10);

function (d) {
  return color(d.label);
}

If you are transitioning from one data set to another the key function is useful in making sure the proper graphs get updated to their corresponding values.

# bar.values([values])

If values is specified, sets the values array to the specified accessor function or array and returns the bar generator. If values is not specified, returns the current values accessor, which defaults to:

function (d) {
  return d.values;
}

Value Level Accessors

When the d2b bar generator is applied to a selection, the following properties will be invoked for each element in the values array. The function will be passed the value data d and the index position within the values array i.

function (d) {
  // d => {
  //   x: 1,
  //   y: 18
  // }
}

# bar.px([px])

If px is specified, sets the px accessor to the specified accessor function and returns the bar generator. If px is not specified, returns the current px accessor, which defaults to:

function (d) {
  return d.x;
}

# bar.py([py])

If py is specified, sets the py accessor to the specified accessor function and returns the bar generator. If py is not specified, returns the current py accessor, which defaults to:

function (d) {
  return d.y;
}

# bar.pcentered([boolean])

If boolean is specified, sets the pcentered-accessor function to the specified accessor function or bool and returns the bar generator. If boolean is not specified, returns the current pcentered-accessor function, which defaults to () => false.

The "point" centered accessor will force a bar to be rendered in the center of a bar group. Useful when doing an opacity overlapped bar chart like in this block.

# bar.pcolor([color])

If color is specified, sets the color accessor to the specified accessor function and returns the bar generator. If color is not specified, returns the current color accessor, which defaults to () => null.

If color is null then the corresponding graph color will be used.

# bar.pkey([key])

If key is specified, sets the key accessor to the specified accessor function and returns the bar generator. If key is not specified, returns the current key accessor, which defaults to (d, i) => i.

If transitioning between data sets, the key may be used to be sure that the matching bar points transition properly.

# bar.pannotation([annotation])

If annotation is specified, sets the annotation accessor to the specified accessor function and returns the bar generator. If annotation is not specified, returns the current annotation accessor, which defaults to:

function (d) {
  return d.annotation;
}

Annotations

The bar graph generator has built in hooks for annotations using the d3.annotation plugin. Each value in a bar graph may contain an annotation at its (x, y) location. For example, a bar value with an annotation:

{
  x: 2,
  y: 41,
  annotation: {
    // dx/dy pixel offset that the annotation has from the value
    dy: -150,
    dx: -150,
    // use a custom annotation type from d3.annotation
    type: d3.annotationCalloutCircle,
    note: {
      title: 'Important Point'
    },
    subject: {
      radius: 20,
      radiusPadding: 5
    },
    connector: {
      end : "arrow"
    }
  }
}

Other Methods

# bar.getComputedGraphs(context)

Returns the array of computed graphs for the context's datum. This is not the same as the graphs array provided in the datum. This is a constructed graphs array that invokes all of the accessors described above. Usually this is used internally by the d2b.chartAxis module.

# bar.getVisiblePoints(context)

Returns the array of visible points. This array will be formed by concatenating all of the graph values and invoking the px and py accessor for each. This is helpful when trying to dynamically update the scale domains based on the range of x and y values. Usually this is used internally by the d2b.chartAxis module.

results matching ""

    No results matching ""