-
areaGradient( [areaGradient])
-
If areaGradient is specified sets the areaGradient setting and returns the Line instance itself. If areaGradient is true, when a line chart shape area, each area filled gradient.
Parameters:
Name |
Type |
Argument |
Default |
Description |
areaGradient |
boolean
|
<optional>
|
false
|
If is true, each area filled gradient. |
- Source:
-
Returns:
-
Type
-
areaGradient
|
Line
Example
line.areaGradient(true)
-
axis( [axis] [, adding])
-
If axis is specified, append it to axis settings and returns the instance itself. If axis is a string, it refers axis's target(x or y) and will be converted to an object. If axis is an array of objects, replaces existing axis settings. If axis is not specified, returns the current axis settings.
If axis exists and adding is false, it removes the existing axis settign which has the same target of axis.
Parameters:
Name |
Type |
Argument |
Default |
Description |
axis |
string
|
object
|
Array.<Object>
|
<optional>
|
|
Properties
Name |
Type |
Argument |
Default |
Description |
target |
string
|
|
x
|
target scale's name |
orient |
string
|
<optional>
|
bottom
|
top|right|bottom|left |
thickness |
number
|
<optional>
|
18
|
|
showDomain |
boolean
|
<optional>
|
true
|
|
showticks |
boolean
|
<optional>
|
true
|
|
compressTicks |
boolean
|
<optional>
|
false
|
if is true, only first or end value of the tick shown. |
showTitle |
boolean
|
<optional>
|
true
|
|
title |
string
|
<optional>
|
|
|
titleOrient |
string
|
<optional>
|
|
top|right|bottom|left |
autoTickFormat |
boolean
|
<optional>
|
|
if is true, not apply dimension and measure's format. |
|
adding |
boolean
|
<optional>
|
true
|
if adding is false, removes existing the axis specified target. |
- Inherited From:
-
- Overrides:
- Source:
-
Returns:
-
Type
-
axis
|
RectLinear
Example
rectLinear.axis('x') // sets X-axis on the bottom side
.axis({target: 'y', orient: 'right', showTicks: false, title: 'Custom Axis Y'}) // sets Y-axis on the right side
rectLinear.axis('y', false) // removes existing Y-axis
-
axisTitle(targetAndField, title)
-
sets a custom title of an axis. Filters axes, returning the axis that has the same target and field whith targetAndField, then sets or remove it's title. If title is false the selected axis's custom title will be removed. Actually, .axisTitle method manipulates
axisTitles
.
Parameters:
Name |
Type |
Description |
targetAndField |
string
|
object
|
Properties
Name |
Type |
Argument |
Description |
target |
string
|
|
|
field |
string
|
<optional>
|
|
|
title |
string
|
|
- Inherited From:
-
- Overrides:
- Source:
-
Returns:
-
Type
-
RectLinear
Example
rectLinear.axisTitle('x', 'custom Axis X')
rectLinear.axisTitle('y.Sales', 'custom Axis Y')
rectLinear.axisTitle({target:'y', field: 'Sales'}, 'custom Axis X')
rectLinear.axisTitle('x', false);
-
axisTitles( [axisTitles])
-
set axis titles directly.
Parameters:
Name |
Type |
Argument |
Description |
axisTitles |
Array.<Object>
|
<optional>
|
|
axisTitles[].target |
string
|
|
target scale name of the axis(x|y) |
axisTitles[].title |
string
|
|
title to show |
axisTitles[].field |
string
|
<optional>
|
target field name of the axis |
- Inherited From:
-
- Overrides:
- Source:
-
Returns:
-
Type
-
axisTitles
|
RectLinear
Example
rectLinear.axisTitles({target:'x', title: 'custom title X'});
-
brush( [brush])
-
If brush is specified, sets the brush settings and returns the instance itself. If brush is true, renders its brush. If brush is not specified, returns the instance's current brush setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
brush |
boolean
|
<optional>
|
false
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
brush
|
BrushMixin
Example
brush.brush(true); //shows brush
-
color(color)
-
If color is specified, sets color schemes in array and returns the instance itself. The color schemes is used for color marks of the chart and follows
CSS color type. If color is not specified, returns the instance's current color schemes.
Parameters:
Name |
Type |
Default |
Description |
color |
string
|
Array.<string>
|
defaultSchemes
|
color schemes |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
color
|
Core
Example
core.color('red');
core.color(['#fff', 'steelblue', 'rgb(128, 128, 128)']);
core.color();
-
colorDomain( [colorDomain])
-
If colorDomain is specified, match color domain and color schemes manually. If colorDomain is not specified, returns the instance's current colorDomain.
ColorDomain is an array of objects includes a key and a color(optional) property. If a color peroperty is not specified, uses a color in internal
color schemes
in order. Also, if an element of array is string type, it translates into an object with a key property.
Parameters:
Name |
Type |
Argument |
Description |
colorDomain |
Array.<string>
|
Array.<object>
|
<optional>
|
|
colorDomain[].key |
string
|
number
|
|
|
colorDomain[].color |
string
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Example
bar.data([
{name: 'A', value: 10},
{name: 'B', value: 20},
{name: 'C', value: 30},
{name: 'D', value: 40}
]) //sets data
.dimensions(['name'])
.measures(['value'])
.color(['red', 'green', 'blue', 'yellow'])
.colorDomain(['B', {key: 'A', color: 'orange'}, {key: 'D'}])
// sets bar A: orange / bar B: red / bar C: blue / bar D: green
-
container( [container])
-
The Core method `.container` sets a selector of a chart holder element or an element itself as its container. Core finds the holder element and renders a chart on it.
If container is specified, sets a selector or a element and returns the instance itself. If container is not specified, returns the instance's current container.
Parameters:
Name |
Type |
Argument |
Description |
container |
string
|
Element
|
<optional>
|
a selector or an element |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
string
|
Element
|
Core
Example
core.container('#chart-container'); //sets a selector of a chart holder element as its container
core.container(document.getElementById('chart-container')); //sets an element as its container
core.container(); //returns the current container;
-
curve( [curve])
-
sets a curve type. If is not specified, returns the current curve setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
curve |
string
|
<optional>
|
linear
|
(linear|stepped|curved) |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
curve
|
SeriesMixin
Example
series.curve('curved') //renders Catmull-Rom spline curve
series.curve();
-
customDomain( [customDomain])
-
The Core method `.customDomain` sets a user-defined domain of a measrure variable. It's reflection differs based on the char type.
If customDomain is specified, sets a selector or a element and returns the instance itself. If customDomain is not specified, returns the instance's current customDomain.
Parameters:
Name |
Type |
Argument |
Description |
customDomain |
Array.<Number>
|
<optional>
|
a user-defined domain of a measrure variable |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
customDomain
|
Core
Example
core.customDomain([0, 100]); //sets a custom domain;
core.container(); //returns the current custom domain;
-
data( [data])
-
If data is specified, sets data and returns the instance itself. The data shoud be an array of objects, and the object includes the properties used as dimensions and measures. If data is not specified, returns the instance's current data.
Parameters:
Name |
Type |
Argument |
Description |
data |
Array.<Object>
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
data
|
Core
Example
core.data([
{name: 'a', value: 10},
{name: 'a', value: 100},
{name: 'b', value: 20}
]) //sets data
.dimensions(['name'])
.measures(['value']);
core.data(); //returns the current data;
-
demute(nodeOrRegion)
-
recovers the selection's opacity from
Core#mute
Parameters:
Name |
Type |
Description |
nodeOrRegion |
d3Selection
|
the selection of nodes and regions in the chart |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
-
demuteLegend( [exceptionFilter])
-
Fiters labels with a key different with exceptionFilter in the chart's legend, demute the selection.
Parameters:
Name |
Type |
Argument |
Description |
exceptionFilter |
string
|
function
|
<optional>
|
If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
core.demuteLegend('Sales'); // recover opacity of muted labels, whose key is not 'Sales', in the legend;
-
demuteNodes( [excemptionFilter])
-
Fiters nodes according to excemptionFilter in the chart and
demutes
the nodes. If excemptionFilter is no specified, demutes all nodes.
Parameters:
Name |
Type |
Argument |
Description |
excemptionFilter |
string
|
function
|
<optional>
|
If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
core.demuteNodes('Sales'); // nodes whose key is not 'Sales' are demuted
core.demuteNodes(d => d.key !== 'Sales') // nodes whose key is not 'Sales' are demuted
-
dimension(dimension)
-
appends a dimension to
dimensions
array. A dimenension(key) acts as an index that is used to look up measure(value). A synonym for dimension is independent attribute. Jelly-chart has
data
in an array to be grouped into a hierarchical tree structure with dimensions; multi-dimensions can make multiple levels of grouping. The combination of all dimensions would be unique for each item. Each dimension is converted into a mark(region or node) according to its chart type and level.
Parameters:
Name |
Type |
Description |
dimension |
string
|
object
|
Properties
Name |
Type |
Argument |
Default |
Description |
field |
string
|
|
|
refers a key property in objects from the data array . The key property will be invoked for each element in the input array and must return a string identifier to assign the element to its group. |
order |
string
|
<optional>
|
natural
|
chooses comparator types among natural, ascending and descending, sorting nodes in selected order. |
max |
number
|
<optional>
|
100
|
maximum number of nodes |
format |
string
|
function
|
<optional>
|
|
a time formatter for the given string specifier |
formatSub |
string
|
function
|
<optional>
|
|
a sub-time formatter for the given string specifier, which used sub-ticks on it's axis. |
interval |
string
|
<optional>
|
|
If the dimension has Date type values, set an interval which is a conventional unit of time to grouped its value. |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
core.dimension({field:'Sales', order:'ascending'});
core.dimension({field: 'Sales Date', format: '%y', interval: 'year'})
core.dimension('Profit');
-
dimensions( [dimensions])
-
If dimensions is specified, sets dimensions and returns the instance itself. If dimensions is an object or string, it would be turned into an array with a dimension. If dimensions is not specified, returns the instance's current dimensions.
A dimenension(key) acts as an index that is used to look up measure(value). A synonym for dimension is independent attribute. Jelly-chart has
data
in an array to be grouped into a hierarchical tree structure with dimensions; multi-dimensions can make multiple levels of grouping. The combination of all dimensions would be unique for each item. Each dimension is converted into a region or a node according to its chart type and level.
Parameters:
Name |
Type |
Argument |
Description |
dimensions |
string
|
object
|
Array.<Object>
|
<optional>
|
sets a dimension array which are objects has properties for aggregation(grouping). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
dimensions
|
Core
Example
bar.data([
{category:'Blue', name: 'A', value: 10},
{category:'Blue', name: 'B', value: 20},
{category:'Blue', name: 'C', value: 30},
{category:'Blue', name: 'D', value: 40},
{category:'Red', name: 'A', value: 20},
{category:'Red', name: 'B', value: 10},
{category:'Red', name: 'C', value: 40},
{category:'Red', name: 'D', value: 10},
]) //sets data
.dimensions(['category', {field:'name', order:'ascending'}])
//generates a grouped bar chart which has 2 regions (Red, Blue) with 4 bars(A,B,C,D) each.
-
domain(name)
-
gets a domain of the scale with a specified name
Parameters:
Name |
Type |
Description |
name |
string
|
|
- Inherited From:
-
- Source:
-
-
facet( [facet])
-
If facet is specified, sets the facet settings and returns the instance itself. If is true, renders vertical oriented partitions. If is a string or object, it changes the orient of partitions. If is false, renders in the default way. If facet is not specified, returns the instance's current facet setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
facet |
boolean
|
string
|
object
|
<optional>
|
false
|
(false|true|vertical|horizontal)
Properties
Name |
Type |
Argument |
Default |
Description |
orient |
string
|
<optional>
|
vertical
|
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
facet
|
Facet
Example
facet.facet(true) // renders vertical partitions
facet.facet('horizontal')
facet.facet({orient: 'vertical'})
facet.facet() // returns the current setting
-
filterNodes(filter)
-
Fiters nodes in the chart, returning a new selection that contains only the elements for which the specified filter is true.
Parameters:
Name |
Type |
Description |
filter |
string
|
function
|
The filter may be specified either as a selector stringfilter is or a function. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
d3Selection
Example
core.filterNodes(function(d) {
return d.key === key;
})
-
filterRegions(filter)
-
Fiters regions in the chart, returning a new selection that contains only the elements for which the specified filter is true.
Parameters:
Name |
Type |
Description |
filter |
string
|
function
|
The filter may be specified either as a selector stringfilter is or a function. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
d3Selection
Example
core.filterRegions(function(d) {
return d.key === key;
})
-
fitLine( [fitLine])
-
If is true, renders a mean line of serieses or points. If is not specified, returns the current fitLine setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
fitLine |
boolean
|
<optional>
|
false
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
fitLine
|
FitLineMixin
Example
fitLineMixin.fitLine(true)
-
font( [fontStyle])
-
If fontStyle is specified, sets the font styles to the specified object and returns the instance itself. If fontStyle is not specified, returns the instance's current fontStyle.
Parameters:
Name |
Type |
Argument |
Description |
fontStyle |
object
|
<optional>
|
Properties
Name |
Type |
Default |
Description |
font-family |
string
|
sans-serif
|
|
font-size |
number
|
12
|
|
font-weight |
string
|
lighter
|
|
font-style |
string
|
normal
|
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
fontStyle
|
Core
Example
core.font({'font-size': 16}); //sets th font size to 16px, then returns core itself;
core.font(); //returns the current fontStyle object;
-
grid( [grid])
-
If grid is specified, sets grid setting and returns the instance itself. If grid is true, shows grids of axes. If grid is not specified, it returns the current grid setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
grid |
boolean
|
<optional>
|
false
|
|
- Inherited From:
-
- Overrides:
- Source:
-
Returns:
-
Type
-
grid
|
RectLinear
-
height( [height])
-
If height is specified, sets height of the container and returns the instance itself. The unit of height is a pixel. If height is not specified, returns the instance's current height.
Parameters:
Name |
Type |
Argument |
Default |
Description |
height |
number
|
<optional>
|
480
|
height of the container |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
height
|
Core
Example
core.height(600); //sets a custom height;
core.height(); //returns the current height;
-
individualScale( [individualScale])
-
If individualScale is specified sets the individualScale setting and returns the Line instance itself. When a line chart has multiple measures, each measure will be a series. If individualScale is true, when has multiple measures, each series will be drawn based on an individual scale of itself.
Parameters:
Name |
Type |
Argument |
Default |
Description |
individualScale |
boolean
|
<optional>
|
false
|
If is true, renders a mean-line. |
- Source:
-
Returns:
-
Type
-
individualScale
|
Line
Example
line.individualScale(true)
-
innerSize(needArray)
-
returns an inner size of chart excepting offsets from the container's size
Parameters:
Name |
Type |
Default |
Description |
needArray |
boolean
|
false
|
If needArray is true, retruns the size in array |
- Inherited From:
-
- Source:
-
Returns:
returns {width, height} or [width, height] according to needArray
-
Type
-
object
|
array
-
label( [label])
-
If label is specified as true, sets the chart to show labels on its marks and returns the instance itself. If label is not specified, returns the instance's current height.
Parameters:
Name |
Type |
Argument |
Default |
Description |
label |
boolean
|
<optional>
|
false
|
whether to show labels on marks |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
label
|
Core
Example
core.label(true); //shows labels
core.label(); //returns the current height;
-
leastSquare( [key])
-
gets a result of linear least squres from serieses. If key is specified, returns the value only froma specific series. It is used for draw fit-lines.
Parameters:
Name |
Type |
Argument |
Description |
key |
string
|
<optional>
|
a name of a series |
- Source:
-
Returns:
returns [{key: fitLineVal, slope, intercept, rSquare}...]
-
Type
-
Array.<object>
Example
let l = line.data([
{name: 'A', sales: 10, profit: 5},
{name: 'B', sales: 20, profit: 10},
{name: 'C', sales: 30, profit: 3},
...
]) //sets data
.dimensions(['name'])
.measures(['sales', 'profit'])
.render();
l.leastSquare('A') // returns a result of the series A
l.leastSquare() // returns from all serieses
-
legend( [legend])
-
If legend is specified, sets the legend object which includes an orient and a thickness of the legend. If legend is a boolean, it would be tured into an object with a bottom orient and a default thickness. Also, is a string, it would become a orient of an object. If legend is not specified, returns the instance's current legend.
Parameters:
Name |
Type |
Argument |
Description |
legend |
boolean
|
string
|
object
|
<optional>
|
sets a legend type. If is a false, removes the legend.
Properties
Name |
Type |
Argument |
Default |
Description |
orient |
string
|
|
bottom
|
sets a legend orient(top|right|bottom|left) |
align |
string
|
<optional>
|
start
|
sets a legend align(start|middle|end) |
thickness |
number
|
<optional>
|
(54|162)
|
sets a legend thickness. if the orient is top or bottom, the default thickness is 54 pixels. Otherwise, it would be 162 pixels. |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
legend
|
Core
Example
core.legend(true); //sets {orient: 'bottom', thickness: 54}
core.legend({orient:'right', thickness: 200});
core.legend();
-
limitKeys(limitNumber)
-
limits the number of nodes length as many as limitNumber.
Parameters:
Name |
Type |
Description |
limitNumber |
number
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
core.limitKeys(10);
-
limitRows(limitNumber)
-
limits the number of elements length from the data
as many as limitNumber, in order.
Parameters:
Name |
Type |
Description |
limitNumber |
number
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
core.limitRows(100);
-
margin( [margin])
-
If margin is specified, sets margin of the container and returns the instance itself. The unit of margin is a pixel. If margin is not specified, returns the instance's current margin.
Parameters:
Name |
Type |
Argument |
Description |
margin |
object
|
<optional>
|
Properties
Name |
Type |
Argument |
Default |
Description |
top |
number
|
<optional>
|
40
|
top |
right |
number
|
<optional>
|
40
|
right |
bottom |
number
|
<optional>
|
40
|
bottom |
left |
number
|
<optional>
|
40
|
left |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
margin
|
Core
Example
core.margin({top:100, right: 100}); //sets the margin's top and right amount
core.margin();
-
meanLine( [meanLine])
-
If meanLine is specified sets the meanLine setting and returns the Line instance itself. If meanLine is true renders a mean-line on each series. If meanLine is not specified, returns the current meanLine setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
meanLine |
boolean
|
<optional>
|
false
|
If is true, renders a mean-line. |
- Source:
-
Returns:
-
Type
-
meanLine
|
Line
Example
line.meanLine(true)
-
measure(measure)
-
appends a measure to
measures
array. A measure(value) acts as an value that is looked up by dimensions(key). A synonym for measure is dependent attribute. Jelly-chart has
data
in an array to be grouped into a hierarchical tree structure with dimensions. If measures are specified, leaves of the tree will be summarized by them.
Parameters:
Name |
Type |
Description |
measure |
string
|
object
|
Properties
Name |
Type |
Argument |
Default |
Description |
field |
string
|
<optional>
|
|
refers a value property in objects from the data array . The value property will be invoked for leaf elements during aggregation and their values in the property will be summarized by the specified operator as an value. |
op |
string
|
<optional>
|
sum
|
an operator(sum, mean, variance, min, max, median) to summarize leaf elements. |
format |
string
|
<optional>
|
|
a time formatter for the given string specifier |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
core.measure({field:'Sales', 'op': 'mean'});
core.measure('Profit');
-
measures( [measures])
-
If measures is specified, sets measures and returns the instance itself. If measures is an object or string, it would be turned into an array with a measure. If measures is not specified, returns the instance's current measures.
A measure(value) acts as an value that is looked up by dimensions(key). A synonym for dimension is independent attribute. Jelly-chart has
data
in an array to be grouped into a hierarchical tree structure with dimensions. If measures are specified, leaves of the tree will be summarized by them.
Parameters:
Name |
Type |
Argument |
Description |
measures |
string
|
object
|
Array.<Object>
|
<optional>
|
sets a measure array which are objects has properties for aggregation(grouping). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
measures
|
Core
Example
bar.data([
{name: 'A', sales: 10},
{name: 'B', sales: 20},
{name: 'C', sales: 30},
{name: 'D', sales: 40},
{name: 'A', sales: 20},
{name: 'B', sales: 10},
{name: 'C', sales: 40},
{name: 'D', sales: 10},
]) //sets data
.dimensions(['name'])
.measures([{field:'sales', op: 'mean'}])
//generates a mono bar chart with 4 bars(A,B,C,D).
//each bar's length will be determined mean of 'sales' values from leaf elements.
-
-
If is true, renders the tooltip showing multiple points on the same horizontal position. If is a string or object, sets sorting order of items by each value. If multiTooltip is not specified, returns the instance's multiTooltip setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
multiTooltip |
boolean
|
string
|
object
|
<optional>
|
false
|
Properties
Name |
Type |
Argument |
Default |
Description |
sortByValue |
string
|
<optional>
|
natural
|
(natural|ascending|descending) |
|
- Source:
-
Returns:
-
Type
-
multiTooltip
|
Line
Example
line.multiTooltip(true) // show multiple points on the same horizontal position on a tooltip
line.multiTooltip('ascending') //sort items in ascending order by their each value
line.multiTooltip(false)
line.multiTooltip()
-
mute(nodeOrRegion [, intensity])
-
Parameters:
Name |
Type |
Argument |
Description |
nodeOrRegion |
d3Selection
|
|
the selection of nodes and regions in the chart |
intensity |
number
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
-
muteIntensity( [muteIntensity])
-
If muteIntensity is specified, sets muteIntensity of the chart and returns the instance itself. MuteIntensity determines opacity of marks which is muted by
.mute
method. If muteIntensity is not specified, returns the instance's current width.
Parameters:
Name |
Type |
Argument |
Default |
Description |
muteIntensity |
number
|
<optional>
|
0.3
|
opacity of muted marks |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
muteIntensity
|
Core
Example
core.muteIntensity(0.5); //sets a custom width;
core.muteIntensity(); //returns the current width;
-
muteLegend( [exceptionFilter])
-
Fiters labels with a key different with exceptionFilter in the chart's legend, demute the selection.
Parameters:
Name |
Type |
Argument |
Description |
exceptionFilter |
string
|
function
|
<optional>
|
If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
Example
core.demuteLegend('Sales'); // recover opacity of muted labels, whose key is not 'Sales', in the legend;
-
nodes()
-
returns all nodes
- Inherited From:
-
- Source:
-
Returns:
nodes
-
Type
-
d3Selection
-
offset()
-
returns offsets around the content area, that includes the
margin
,
legend
area
- Inherited From:
-
- Overrides:
- Source:
-
Returns:
{top, right, bottom, left} offset in pixels
-
Type
-
object
-
padding( [padding])
-
sets the padding to the same padding value. Depending on the chart type and its scale type, padding will be applied differently. If padding is not specified, returns the instance's current padding value.
Parameters:
Name |
Type |
Argument |
Default |
Description |
padding |
number
|
<optional>
|
0
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
padding
|
PaddingMixin
Example
paddingMixin.padding(0.5)
paddingMixin.padding()
-
point( [point])
-
If is true, renders a point mark on each data point. If is not specified, returns the current point setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
point |
boolean
|
<optional>
|
false
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
point
|
SeriesMixin
Example
series.point(true)
-
pointRatio( [pointRatio])
-
sets point radius relative to the line width. If is not specified, returns the current pointRatio setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
pointRatio |
number
|
<optional>
|
3
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
pointRatio
|
SeriesMixin
Example
series.pointRatio(5) // the point radius will be 5 times as large as the line width.
-
process( [type] [, call] [, option])
-
sets and gets rendering procedures.
Parameters:
Name |
Type |
Argument |
Description |
type |
string
|
<optional>
|
|
call |
function
|
<optional>
|
|
option |
object
|
<optional>
|
Properties
Name |
Type |
Description |
after |
string
|
|
allow |
function
|
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
process
|
Array.<process>
|
Core
-
regionPadding( [regionPadding])
-
sets the regionPadding to the same padding value. Depending on the chart type and its scale type, it will be applied differently. If regionPadding is not specified, returns the instance's current regionPadding value.
Parameters:
Name |
Type |
Argument |
Default |
Description |
regionPadding |
number
|
<optional>
|
0
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
regionPadding
|
PaddingMixin
Example
paddingMixin.regionPadding(0.5)
paddingMixin.regionPadding()
-
regions()
-
returns all regions
- Inherited From:
-
- Source:
-
Returns:
regions
-
Type
-
d3Selection
-
render( [keep] [, skip])
-
renders the chart. At the end of settings for a chart, it should be called. If keep is true, it does not reset existing scales.
Parameters:
Name |
Type |
Argument |
Default |
Description |
keep |
boolean
|
<optional>
|
false
|
If is true, not reset existing scales. |
skip |
Array.<String>
|
<optional>
|
[]
|
If skip includes an process, the process will be ignored. |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
-
reset( [keep])
-
reset the chart
Parameters:
Name |
Type |
Argument |
Default |
Description |
keep |
boolean
|
<optional>
|
false
|
If keep is true, not reset existing scales. |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
Core
-
scale( [name])
-
If name is specified, returns a scale with the name in existing scales. If name is not specified, returns an object includes all scales.
Parameters:
Name |
Type |
Argument |
Description |
name |
string
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
object
|
function
Example
core.scale('color'); //returns the color scale;
core.scale() // returns the scale object
-
shape( [shape])
-
selects a shape type. Available shapes depends on the chart type. If shape is not specified, returns the current shape setting.
Parameters:
Name |
Type |
Argument |
Description |
shape |
string
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
shape
|
ShapeMixin
Example
line.shape('area')
parCoords.shape('scatter-matrix')
treemap.shape('pack')
-
-
shows a tooltip on a node which has the same keys.
Parameters:
Name |
Type |
Argument |
Description |
keys |
string
|
<repeatable>
|
Keys from the leaf to parents |
- Inherited From:
-
- Source:
-
- To Do:
-
- not work for a multiTooltip
Returns:
-
Type
-
Core
-
size( [size])
-
If size is specified, sets the size range and it direction and returns the instance itself. Each chart type apply size settings differently. If size is not specified, returns the instance's current transition and use the default size setting.
Parameters:
Name |
Type |
Argument |
Description |
size |
number
|
object
|
Array.<Object>
|
<optional>
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
size
|
Core
Example
line.size(20) // set point radius of a line chart to 20 pixel
scatter.size(10) // set point radius of a scatter chart to 10 pixel
scatter.size([10, 100]) // set the range of point radius of a scatter chart from 10 to 100 pixel
pie.size([20, 100]) // set the inner radius to 20 and the outer radius to 100 seperately
treemap.size({range: [600, 400]}) // set the width to 600 and the height to 400 pixel of a treemap
-
stream( [stream])
-
If stream is an object or an array of objects, appends the stream to existing data. If stream is specified, during re-rendering, it will keeps the domain interval limited by
viewInterval
. When re-renders chart, should use .render(true).
If stream is not specified, returns the existing stream.
Parameters:
Name |
Type |
Argument |
Default |
Description |
stream |
object
|
Array.<Object>
|
<optional>
|
null
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
zoom
|
ZoomMixin
Example
stream.stream({category:'A', sales: 100})
.render(true);
stream.stream([
{category: 'D', sales: 100},
{category: 'E', sales: 200}
]).render(true);
-
-
If tooltip is specified, decides to show a tooltip in the chart by it value. If is false, prevent showing the tooltip. If tooltip is not specified, returns the instance's current tooltip setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
tooltip |
boolean
|
object
|
<optional>
|
true
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
tooltip
|
Core
Example
core.tooltip(true); //set to show a tooltip
core.tooltip({sortByValue:'ascending'}); // set to show a tooltip and sort items in order of their measrue values.
-
transition( [transition])
-
If transition is specified, sets the transition duration and delay to the specified object and returns the instance itself. If transition is not specified, returns the instance's current transition.
Parameters:
Name |
Type |
Argument |
Description |
transition |
object
|
<optional>
|
Properties
Name |
Type |
Default |
Description |
duration |
number
|
600
|
transition duration in milliseconds |
delay |
number
|
20
|
trnasition delay in millisecends |
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
transition
|
Core
Example
core.transition({duration: 1000}); //sets the transition duration to 1000 milliseconds, then returns core itself;
core.transition(); //returns the current transition object;
-
viewInterval( [unit] [, multiple])
-
If unit is number or string, limit the key domain's length or distance within the interval. If the key domain's scale is ordnial, the length of domain will be the same to unit. Also, if the scale is continous, the distance of domain will be fixed as much as unit. If unit is string, it must be a time interval. When multiple exists, it will multiply the unit.
If unit is not specified, returns the existing viewInterval.
Parameters:
Name |
Type |
Argument |
Default |
Description |
unit |
number
|
string
|
<optional>
|
null
|
|
multiple |
number
|
<optional>
|
1
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
zoom
|
ZoomMixin
Example
stream.viewInterval(1000)
stream.viewInterval('month', 3)
-
width( [width])
-
If width is specified, sets width of the container and returns the instance itself. The unit of width is a pixel. If width is not specified, returns the instance's current width.
Parameters:
Name |
Type |
Argument |
Default |
Description |
width |
number
|
<optional>
|
640
|
width of the container |
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
width
|
Core
Example
core.width(600); //sets a custom width;
core.width(); //returns the current width;
-
zoom( [zoom])
-
If zoom is string, selects a zoom type. If zoom is true, use the normal zoom type. If zoom is not specified, renders the current zoom Setting.
Parameters:
Name |
Type |
Argument |
Default |
Description |
zoom |
boolean
|
string
|
<optional>
|
false
|
|
- Inherited From:
-
- Source:
-
Returns:
-
Type
-
zoom
|
ZoomMixin
Example
zoomMixin.zoom(true) // selects normal zoom type
zoomMixin.zoom(false) // disable the zoom feature.
zoomMixin.zoom('brush') // selects brushable zoom type.