dc.js

Class: SunburstChart

SunburstChart

The sunburst chart implementation is usually used to visualize a small tree distribution. The sunburst chart uses keyAccessor to determine the slices, and valueAccessor to calculate the size of each slice relative to the sum of all values. Slices are ordered by ordering which defaults to sorting by key.

The keys used in the sunburst chart should be arrays, representing paths in the tree.

When filtering, the sunburst chart creates instances of HierarchyFilter.

new SunburstChart(parent [, chartGroup])

Create a Sunburst Chart

Parameters:
Name Type Argument Description
parent String | node | d3.selection

Any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection.
chartGroup String <optional>

The name of the chart group this chart instance should be placed in. Interaction with a chart will only trigger events and redraws within the chart's group.
Mixes In:
Source:
Example
// create a sunburst chart under #chart-container1 element using the default global chart group
var chart1 = new SunburstChart('#chart-container1');
// create a sunburst chart under #chart-container2 element using chart group A
var chart2 = new SunburstChart('#chart-container2', 'chartGroupA');

Classes

SunburstChart

Methods

cx( [cx])

Get or set center x coordinate position. Default is center of svg.

Parameters:
Name Type Argument Description
cx Number <optional>
Source:
Returns:
Type
Number | SunburstChart

cy( [cy])

Get or set center y coordinate position. Default is center of svg.

Parameters:
Name Type Argument Description
cy Number <optional>
Source:
Returns:
Type
Number | SunburstChart

defaultRingSizes()

Constructs the default RingSizes parameter for ringSizes(), which makes the rings narrower as they get farther away from the center.

Can be used as a parameter to ringSizes() to reset the default behavior, or modified for custom ring sizes.

Source:
Returns:
Type
RingSizes
Example
var chart = new dc.SunburstChart(...);
  chart.ringSizes(chart.defaultRingSizes())

emptyTitle( [title])

Title to use for the only slice when there is no data.

Parameters:
Name Type Argument Description
title String <optional>
Source:
Returns:
Type
String | SunburstChart

equalRingSizes()

Constructs a RingSizes parameter for ringSizes() that will make the chart rings equally wide.

Source:
Returns:
Type
RingSizes
Example
var chart = new dc.SunburstChart(...);
  chart.ringSizes(chart.equalRingSizes())

externalLabels( [externalLabelRadius])

Position slice labels offset from the outer edge of the chart.

The argument specifies the extra radius to be added for slice labels.

Parameters:
Name Type Argument Description
externalLabelRadius Number <optional>
Source:
Returns:
Type
Number | SunburstChart

innerRadius( [innerRadius])

Get or set the inner radius of the sunburst chart. If the inner radius is greater than 0px then the sunburst chart will be rendered as a doughnut chart. Default inner radius is 0px.

Parameters:
Name Type Argument Default Description
innerRadius Number <optional>
 0
Source:
Returns:
Type
Number | SunburstChart

minAngleForLabel( [minAngleForLabel])

Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not display a slice label.

Parameters:
Name Type Argument Default Description
minAngleForLabel Number <optional>
 0.5
Source:
Returns:
Type
Number | SunburstChart

radius( [radius])

Get or set the outer radius. If the radius is not set, it will be half of the minimum of the chart width and height.

Parameters:
Name Type Argument Description
radius Number <optional>
Source:
Returns:
Type
Number | SunburstChart

relativeRingSizes( [relativeRingSizesFunction])

Constructs a RingSizes parameter for ringSizes() using the given function to determine each rings width.

  • The function must return an array containing portion values for each ring/level of the chart.
  • The length of the array must match the number of rings of the chart at runtime, which is provided as the only argument.
  • The sum of all portions from the array must be 1 (100%).
Parameters:
Name Type Argument Description
relativeRingSizesFunction function <optional>
Source:
Returns:
Type
RingSizes
Example
// specific relative portions (the number of rings (3) is known in this case)
chart.ringSizes(chart.relativeRingSizes(function (ringCount) {
    return [.1, .3, .6];
});

ringSizes(ringSizes)

Get or set the strategy to use for sizing the charts rings.

There are three strategies available

You can modify the returned strategy, or create your own, for custom ring sizing.

RingSizes is a duck-typed interface that must support the following methods:

  • partitionDy(): used for d3.partition.size
  • scaleInnerRadius(d): takes datum and returns radius for d3.arc.innerRadius
  • scaleOuterRadius(d): takes datum and returns radius for d3.arc.outerRadius
  • relativeRingSizesFunction(ringCount): takes ring count and returns an array of portions that must add up to 1
Parameters:
Name Type Description
ringSizes RingSizes
Source:
Returns:
Type
Object | SunburstChart
Example
// make rings equally wide
chart.ringSizes(chart.equalRingSizes())
// reset to default behavior
chart.ringSizes(chart.defaultRingSizes()))