dc.js Class: sunburstChart (original) (raw)

sunburstChart

new sunburstChart(parent [, chartGroup])

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.

Parameters:

Name	Type	Argument	Description
parent	String\|node	d3.selection
chartGroup	String		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:

dc.capMixin
dc.colorMixin
dc.baseMixin

Source:

sunburst-chart.js,line 1

Returns:

Type

dc.sunburstChart

Example

// create a sunburst chart under #chart-container1 element using the default global chart group var chart1 = dc.sunburstChart('#chart-container1'); // create a sunburst chart under #chart-container2 element using chart group A var chart2 = dc.sunburstChart('#chart-container2', 'chartGroupA');

Methods

cx( [cx])

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

Parameters:

Name	Type	Argument	Description
cx	Number

Source:

sunburst-chart.js,line 324

Returns:

Type

Number|dc.sunburstChart

cy( [cy])

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

Parameters:

Name	Type	Argument	Description
cy	Number

Source:

sunburst-chart.js,line 340

Returns:

Type

Number|dc.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:

sunburst-chart.js,line 411

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

Source:

sunburst-chart.js,line 373

Returns:

Type

String|dc.sunburstChart

equalRingSizes()

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

Source:

sunburst-chart.js,line 440

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

Source:

sunburst-chart.js,line 389

Returns:

Type

Number|dc.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		0

Source:

sunburst-chart.js,line 290

Returns:

Type

Number|dc.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		0.5

Source:

sunburst-chart.js,line 356

Returns:

Type

Number|dc.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

Source:

sunburst-chart.js,line 307

Returns:

Type

Number|dc.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

Source:

sunburst-chart.js,line 465

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

defaultRingSizes: the rings get narrower farther away from the center
relativeRingSizes: set the ring sizes as portions of 1
equalRingSizes: the rings are equally wide

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 ford3.partition.size
scaleInnerRadius(d): takes datum and returns radius ford3.arc.innerRadius
scaleOuterRadius(d): takes datum and returns radius ford3.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:

sunburst-chart.js,line 521

Returns:

Type

Object|dc.sunburstChart

Example

// make rings equally wide chart.ringSizes(chart.equalRingSizes()) // reset to default behavior chart.ringSizes(chart.defaultRingSizes()))