dc.js Class: selectMenu (original) (raw)
dc. selectMenu
The select menu is a simple widget designed to filter a dimension by selecting an option from an HTML <select/> menu. The menu can be optionally turned into a multiselect.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| parent | String|node | d3.selection | dc.compositeChart |
| chartGroup | String | The name of the chart group this widget should be placed in. Interaction with the widget will only trigger events and redraws within its group. |
Mixes In:
Source:
Returns:
Type
selectMenu
Example
// create a select menu under #select-container using the default global chart group
var select = dc.selectMenu('#select-container')
.dimension(states)
.group(stateGroup);
// the option text can be set via the title() function
// by default the option text is 'key: value'
select.title(function (d){
return 'STATE: ' + d.key;
})
Methods
filterDisplayed( [filterDisplayed])
Get or set the function that filters option tags prior to display. By default options with a value of < 1 are not displayed.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| filterDisplayed | function |
Source:
Returns:
Type
function|dc.selectMenu
Example
// display all options override the filterDisplayed function:
chart.filterDisplayed(function () {
return true;
});
multiple( [multiple])
Controls the type of select menu. Setting it to true converts the underlying HTML tag into a multiple select.
Parameters:
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
| multiple | boolean | false |
Source:
Returns:
Type
boolean|dc.selectMenu
Example
chart.multiple(true);
numberItems( [numberVisible])
Controls the number of items to show in the select menu, when .multiple() is true. This controls the size attribute of the select element. If null (the default), uses the browser's default height.
Parameters:
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
| numberVisible | number | null |
Source:
Returns:
Type
number|dc.selectMenu
Example
chart.numberVisible(10);
order( [order])
Get or set the function that controls the ordering of option tags in the select menu. By default options are ordered by the group key in ascending order.
Parameters:
| Name | Type | Argument | Description |
|---|---|---|---|
| order | function |
Source:
Returns:
Type
function|dc.selectMenu
Example
// order by the group's value chart.order(function (a,b) { return a.value > b.value ? 1 : b.value > a.value ? -1 : 0; });
promptText( [promptText])
Get or set the text displayed in the options used to prompt selection.
Parameters:
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
| promptText | String | 'Select all' |
Source:
Returns:
Type
String|dc.selectMenu
Example
chart.promptText('All states');
promptValue( [promptValue])
Controls the default value to be used fordimension.filterwhen only the prompt value is selected. If null (the default), no filtering will occur when just the prompt is selected.
Parameters:
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
| promptValue | * | null |
Source:
Returns:
Type