d2bSVG Pie

Local Image

# d2b.svgPie()

Constructs a new pie generator with the default settings. This is not the same as d3.pie, however it does use d3.pie internally.

When using the d2b-pie generator you can draw a pie onto each element in the selection.

# pie(context)

Render the pie(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-pie generator, you should join the data to the selected element(s) using selection.data or selection.datum. Here is the default data format.

var pie = d2b.svgPie();

pie.arc()
  .outerRadius(150)
  .innerRadius(100);

var data = [
    {label: 'Apples', value: 120},
    {label: 'Oranges', value: 101},
    {label: 'Grapes', value: 351}
];

var svg = d3.select('svg g')
    .datum(data)
    .call(pie);

# pie.arc([d3-arc])

If d3-arc is specified, sets the d3-arc generator to the specified d3-arc and returns the d2b-pie generator. If d3-arc is not specified, returns the current d3-arc generator, which defaults to d3.arc().

The d3-arc can be configured at will, except for the startAngle, endAngle, and padAngle properties which will be set automatically by the d2b-pie generator.

# pie.pie([d3-pie])

If d3-pie is specified, sets the d3-pie layout to the specified d3.pie and returns the d2b-pie generator. If d3-pie is not specified, returns the current d3-pie layout, which defaults to d3.pie().

The d3-pie can be configured at will, except for the value property which will be set automatically by the d2b-pie generator.

Datum Level Accessors

When the d2b pie 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.

# pie.values([values])

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

function (d) {
  return d;
}

Value Level Accessors

When the d2b pie 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, i) {
  // d => {
  //   label: 'Apples',
  //   value: 120
  // }
}

# pie.value([value])

If value is specified, sets the value accessor to the specified accessor function and returns the pie generator. If value is not specified, returns the current value accessor, which defaults to d => d.value.

# pie.color([color])

If color is specified, sets the color accessor to the specified accessor function and returns the pie 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);
}

# pie.key([key])

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

function (d) {
  return d.label;
}

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

results matching ""

    No results matching ""