base/catalog/static/js/dc.js
/*!
* dc 2.1.9
* http://dc-js.github.io/dc.js/
* Copyright 2012-2016 Nick Zhu & the dc.js Developers
* https://github.com/dc-js/dc.js/blob/master/AUTHORS
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
(function() { function _dc(d3, crossfilter) {
'use strict';
/**
* The entire dc.js library is scoped under the **dc** name space. It does not introduce
* anything else into the global name space.
*
* Most `dc` functions are designed to allow function chaining, meaning they return the current chart
* instance whenever it is appropriate. The getter forms of functions do not participate in function
* chaining because they return values that are not the chart, although some,
* such as {@link dc.baseMixin#svg .svg} and {@link dc.coordinateGridMixin#xAxis .xAxis},
* return values that are themselves chainable d3 objects.
* @namespace dc
* @version 2.1.9
* @example
* // Example chaining
* chart.width(300)
* .height(300)
* .filter('sunday');
*/
/*jshint -W079*/
var dc = {
version: '2.1.9',
constants: {
CHART_CLASS: 'dc-chart',
DEBUG_GROUP_CLASS: 'debug',
STACK_CLASS: 'stack',
DESELECTED_CLASS: 'deselected',
SELECTED_CLASS: 'selected',
NODE_INDEX_NAME: '__index__',
GROUP_INDEX_NAME: '__group_index__',
DEFAULT_CHART_GROUP: '__default_chart_group__',
EVENT_DELAY: 40,
NEGLIGIBLE_NUMBER: 1e-10
},
_renderlet: null
};
/*jshint +W079*/
/**
* The dc.chartRegistry object maintains sets of all instantiated dc.js charts under named groups
* and the default group.
*
* A chart group often corresponds to a crossfilter instance. It specifies
* the set of charts which should be updated when a filter changes on one of the charts or when the
* global functions {@link dc.filterAll dc.filterAll}, {@link dc.refocusAll dc.refocusAll},
* {@link dc.renderAll dc.renderAll}, {@link dc.redrawAll dc.redrawAll}, or chart functions
* {@link dc.baseMixin#renderGroup baseMixin.renderGroup},
* {@link dc.baseMixin#redrawGroup baseMixin.redrawGroup} are called.
*
* @namespace chartRegistry
* @memberof dc
* @type {{has, register, deregister, clear, list}}
*/
dc.chartRegistry = (function () {
// chartGroup:string => charts:array
var _chartMap = {};
function initializeChartGroup (group) {
if (!group) {
group = dc.constants.DEFAULT_CHART_GROUP;
}
if (!_chartMap[group]) {
_chartMap[group] = [];
}
return group;
}
return {
/**
* Determine if a given chart instance resides in any group in the registry.
* @method has
* @memberof dc.chartRegistry
* @param {Object} chart dc.js chart instance
* @returns {Boolean}
*/
has: function (chart) {
for (var e in _chartMap) {
if (_chartMap[e].indexOf(chart) >= 0) {
return true;
}
}
return false;
},
/**
* Add given chart instance to the given group, creating the group if necessary.
* If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
* @method register
* @memberof dc.chartRegistry
* @param {Object} chart dc.js chart instance
* @param {String} [group] Group name
*/
register: function (chart, group) {
group = initializeChartGroup(group);
_chartMap[group].push(chart);
},
/**
* Remove given chart instance from the given group, creating the group if necessary.
* If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
* @method deregister
* @memberof dc.chartRegistry
* @param {Object} chart dc.js chart instance
* @param {String} [group] Group name
*/
deregister: function (chart, group) {
group = initializeChartGroup(group);
for (var i = 0; i < _chartMap[group].length; i++) {
if (_chartMap[group][i].anchorName() === chart.anchorName()) {
_chartMap[group].splice(i, 1);
break;
}
}
},
/**
* Clear given group if one is provided, otherwise clears all groups.
* @method clear
* @memberof dc.chartRegistry
* @param {String} group Group name
*/
clear: function (group) {
if (group) {
delete _chartMap[group];
} else {
_chartMap = {};
}
},
/**
* Get an array of each chart instance in the given group.
* If no group is provided, the charts in the default group are returned.
* @method list
* @memberof dc.chartRegistry
* @param {String} [group] Group name
* @returns {Array<Object>}
*/
list: function (group) {
group = initializeChartGroup(group);
return _chartMap[group];
}
};
})();
/**
* Add given chart instance to the given group, creating the group if necessary.
* If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
* @memberof dc
* @method registerChart
* @param {Object} chart dc.js chart instance
* @param {String} [group] Group name
*/
dc.registerChart = function (chart, group) {
dc.chartRegistry.register(chart, group);
};
/**
* Remove given chart instance from the given group, creating the group if necessary.
* If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
* @memberof dc
* @method deregisterChart
* @param {Object} chart dc.js chart instance
* @param {String} [group] Group name
*/
dc.deregisterChart = function (chart, group) {
dc.chartRegistry.deregister(chart, group);
};
/**
* Determine if a given chart instance resides in any group in the registry.
* @memberof dc
* @method hasChart
* @param {Object} chart dc.js chart instance
* @returns {Boolean}
*/
dc.hasChart = function (chart) {
return dc.chartRegistry.has(chart);
};
/**
* Clear given group if one is provided, otherwise clears all groups.
* @memberof dc
* @method deregisterAllCharts
* @param {String} group Group name
*/
dc.deregisterAllCharts = function (group) {
dc.chartRegistry.clear(group);
};
/**
* Clear all filters on all charts within the given chart group. If the chart group is not given then
* only charts that belong to the default chart group will be reset.
* @memberof dc
* @method filterAll
* @param {String} [group]
*/
dc.filterAll = function (group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
charts[i].filterAll();
}
};
/**
* Reset zoom level / focus on all charts that belong to the given chart group. If the chart group is
* not given then only charts that belong to the default chart group will be reset.
* @memberof dc
* @method refocusAll
* @param {String} [group]
*/
dc.refocusAll = function (group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
if (charts[i].focus) {
charts[i].focus();
}
}
};
/**
* Re-render all charts belong to the given chart group. If the chart group is not given then only
* charts that belong to the default chart group will be re-rendered.
* @memberof dc
* @method renderAll
* @param {String} [group]
*/
dc.renderAll = function (group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
charts[i].render();
}
if (dc._renderlet !== null) {
dc._renderlet(group);
}
};
/**
* Redraw all charts belong to the given chart group. If the chart group is not given then only charts
* that belong to the default chart group will be re-drawn. Redraw is different from re-render since
* when redrawing dc tries to update the graphic incrementally, using transitions, instead of starting
* from scratch.
* @memberof dc
* @method redrawAll
* @param {String} [group]
*/
dc.redrawAll = function (group) {
var charts = dc.chartRegistry.list(group);
for (var i = 0; i < charts.length; ++i) {
charts[i].redraw();
}
if (dc._renderlet !== null) {
dc._renderlet(group);
}
};
/**
* If this boolean is set truthy, all transitions will be disabled, and changes to the charts will happen
* immediately.
* @memberof dc
* @member disableTransitions
* @type {Boolean}
* @default false
*/
dc.disableTransitions = false;
/**
* Start a transition on a selection if transitions are globally enabled
* ({@link dc.disableTransitions} is false) and the duration is greater than zero; otherwise return
* the selection. Since most operations are the same on a d3 selection and a d3 transition, this
* allows a common code path for both cases.
* @memberof dc
* @method transition
* @param {d3.selection} selection - the selection to be transitioned
* @param {Number|Function} [duration=250] - the duration of the transition in milliseconds, a
* function returning the duration, or 0 for no transition
* @param {Number|Function} [delay] - the delay of the transition in milliseconds, or a function
* returning the delay, or 0 for no delay
* @param {String} [name] - the name of the transition (if concurrent transitions on the same
* elements are needed)
* @returns {d3.transition|d3.selection}
*/
dc.transition = function (selection, duration, delay, name) {
if (dc.disableTransitions || duration <= 0) {
return selection;
}
var s = selection.transition(name);
if (duration >= 0 || duration !== undefined) {
s = s.duration(duration);
}
if (delay >= 0 || delay !== undefined) {
s = s.delay(delay);
}
return s;
};
/* somewhat silly, but to avoid duplicating logic */
dc.optionalTransition = function (enable, duration, delay, name) {
if (enable) {
return function (selection) {
return dc.transition(selection, duration, delay, name);
};
} else {
return function (selection) {
return selection;
};
}
};
// See http://stackoverflow.com/a/20773846
dc.afterTransition = function (transition, callback) {
if (transition.empty() || !transition.duration) {
callback.call(transition);
} else {
var n = 0;
transition
.each(function () { ++n; })
.each('end', function () {
if (!--n) {
callback.call(transition);
}
});
}
};
/**
* @namespace units
* @memberof dc
* @type {{}}
*/
dc.units = {};
/**
* The default value for {@link dc.coordinateGridMixin#xUnits .xUnits} for the
* {@link dc.coordinateGridMixin Coordinate Grid Chart} and should
* be used when the x values are a sequence of integers.
* It is a function that counts the number of integers in the range supplied in its start and end parameters.
* @method integers
* @memberof dc.units
* @see {@link dc.coordinateGridMixin#xUnits coordinateGridMixin.xUnits}
* @example
* chart.xUnits(dc.units.integers) // already the default
* @param {Number} start
* @param {Number} end
* @returns {Number}
*/
dc.units.integers = function (start, end) {
return Math.abs(end - start);
};
/**
* This argument can be passed to the {@link dc.coordinateGridMixin#xUnits .xUnits} function of the to
* specify ordinal units for the x axis. Usually this parameter is used in combination with passing
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md d3.scale.ordinal} to
* {@link dc.coordinateGridMixin#x .x}.
* It just returns the domain passed to it, which for ordinal charts is an array of all values.
* @method ordinal
* @memberof dc.units
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md d3.scale.ordinal}
* @see {@link dc.coordinateGridMixin#xUnits coordinateGridMixin.xUnits}
* @see {@link dc.coordinateGridMixin#x coordinateGridMixin.x}
* @example
* chart.xUnits(dc.units.ordinal)
* .x(d3.scale.ordinal())
* @param {*} start
* @param {*} end
* @param {Array<String>} domain
* @returns {Array<String>}
*/
dc.units.ordinal = function (start, end, domain) {
return domain;
};
/**
* @namespace fp
* @memberof dc.units
* @type {{}}
*/
dc.units.fp = {};
/**
* This function generates an argument for the {@link dc.coordinateGridMixin Coordinate Grid Chart}
* {@link dc.coordinateGridMixin#xUnits .xUnits} function specifying that the x values are floating-point
* numbers with the given precision.
* The returned function determines how many values at the given precision will fit into the range
* supplied in its start and end parameters.
* @method precision
* @memberof dc.units.fp
* @see {@link dc.coordinateGridMixin#xUnits coordinateGridMixin.xUnits}
* @example
* // specify values (and ticks) every 0.1 units
* chart.xUnits(dc.units.fp.precision(0.1)
* // there are 500 units between 0.5 and 1 if the precision is 0.001
* var thousandths = dc.units.fp.precision(0.001);
* thousandths(0.5, 1.0) // returns 500
* @param {Number} precision
* @returns {Function} start-end unit function
*/
dc.units.fp.precision = function (precision) {
var _f = function (s, e) {
var d = Math.abs((e - s) / _f.resolution);
if (dc.utils.isNegligible(d - Math.floor(d))) {
return Math.floor(d);
} else {
return Math.ceil(d);
}
};
_f.resolution = precision;
return _f;
};
dc.round = {};
dc.round.floor = function (n) {
return Math.floor(n);
};
dc.round.ceil = function (n) {
return Math.ceil(n);
};
dc.round.round = function (n) {
return Math.round(n);
};
dc.override = function (obj, functionName, newFunction) {
var existingFunction = obj[functionName];
obj['_' + functionName] = existingFunction;
obj[functionName] = newFunction;
};
dc.renderlet = function (_) {
if (!arguments.length) {
return dc._renderlet;
}
dc._renderlet = _;
return dc;
};
dc.instanceOfChart = function (o) {
return o instanceof Object && o.__dcFlag__ && true;
};
dc.errors = {};
dc.errors.Exception = function (msg) {
var _msg = msg || 'Unexpected internal error';
this.message = _msg;
this.toString = function () {
return _msg;
};
this.stack = (new Error()).stack;
};
dc.errors.Exception.prototype = Object.create(Error.prototype);
dc.errors.Exception.prototype.constructor = dc.errors.Exception;
dc.errors.InvalidStateException = function () {
dc.errors.Exception.apply(this, arguments);
};
dc.errors.InvalidStateException.prototype = Object.create(dc.errors.Exception.prototype);
dc.errors.InvalidStateException.prototype.constructor = dc.errors.InvalidStateException;
dc.errors.BadArgumentException = function () {
dc.errors.Exception.apply(this, arguments);
};
dc.errors.BadArgumentException.prototype = Object.create(dc.errors.Exception.prototype);
dc.errors.BadArgumentException.prototype.constructor = dc.errors.BadArgumentException;
/**
* The default date format for dc.js
* @name dateFormat
* @memberof dc
* @type {Function}
* @default d3.time.format('%m/%d/%Y')
*/
dc.dateFormat = d3.time.format('%m/%d/%Y');
/**
* @namespace printers
* @memberof dc
* @type {{}}
*/
dc.printers = {};
/**
* Converts a list of filters into a readable string.
* @method filters
* @memberof dc.printers
* @param {Array<dc.filters>} filters
* @returns {String}
*/
dc.printers.filters = function (filters) {
var s = '';
for (var i = 0; i < filters.length; ++i) {
if (i > 0) {
s += ', ';
}
s += dc.printers.filter(filters[i]);
}
return s;
};
/**
* Converts a filter into a readable string.
* @method filter
* @memberof dc.printers
* @param {dc.filters|any|Array<any>} filter
* @returns {String}
*/
dc.printers.filter = function (filter) {
var s = '';
if (typeof filter !== 'undefined' && filter !== null) {
if (filter instanceof Array) {
if (filter.length >= 2) {
s = '[' + dc.utils.printSingleValue(filter[0]) + ' -> ' + dc.utils.printSingleValue(filter[1]) + ']';
} else if (filter.length >= 1) {
s = dc.utils.printSingleValue(filter[0]);
}
} else {
s = dc.utils.printSingleValue(filter);
}
}
return s;
};
/**
* Returns a function that given a string property name, can be used to pluck the property off an object. A function
* can be passed as the second argument to also alter the data being returned.
*
* This can be a useful shorthand method to create accessor functions.
* @method pluck
* @memberof dc
* @example
* var xPluck = dc.pluck('x');
* var objA = {x: 1};
* xPluck(objA) // 1
* @example
* var xPosition = dc.pluck('x', function (x, i) {
* // `this` is the original datum,
* // `x` is the x property of the datum,
* // `i` is the position in the array
* return this.radius + x;
* });
* dc.selectAll('.circle').data(...).x(xPosition);
* @param {String} n
* @param {Function} [f]
* @returns {Function}
*/
dc.pluck = function (n, f) {
if (!f) {
return function (d) { return d[n]; };
}
return function (d, i) { return f.call(d, d[n], i); };
};
/**
* @namespace utils
* @memberof dc
* @type {{}}
*/
dc.utils = {};
/**
* Print a single value filter.
* @method printSingleValue
* @memberof dc.utils
* @param {any} filter
* @returns {String}
*/
dc.utils.printSingleValue = function (filter) {
var s = '' + filter;
if (filter instanceof Date) {
s = dc.dateFormat(filter);
} else if (typeof(filter) === 'string') {
s = filter;
} else if (dc.utils.isFloat(filter)) {
s = dc.utils.printSingleValue.fformat(filter);
} else if (dc.utils.isInteger(filter)) {
s = Math.round(filter);
}
return s;
};
dc.utils.printSingleValue.fformat = d3.format('.2f');
/**
* Arbitrary add one value to another.
* @method add
* @memberof dc.utils
* @todo
* These assume than any string r is a percentage (whether or not it includes %).
* They also generate strange results if l is a string.
* @param {String|Date|Number} l the value to modify
* @param {Number} r the amount by which to modify the value
* @param {String} [t] if `l` is a `Date`, the
* [interval](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Intervals.md#interval) in
* the `d3.time` namespace
* @returns {String|Date|Number}
*/
dc.utils.add = function (l, r, t) {
if (typeof r === 'string') {
r = r.replace('%', '');
}
if (l instanceof Date) {
if (typeof r === 'string') {
r = +r;
}
if (t === 'millis') {
return new Date(l.getTime() + r);
}
t = t || 'day';
return d3.time[t].offset(l, r);
} else if (typeof r === 'string') {
var percentage = (+r / 100);
return l > 0 ? l * (1 + percentage) : l * (1 - percentage);
} else {
return l + r;
}
};
/**
* Arbitrary subtract one value from another.
* @method subtract
* @memberof dc.utils
* @todo
* These assume than any string r is a percentage (whether or not it includes %).
* They also generate strange results if l is a string.
* @param {String|Date|Number} l the value to modify
* @param {Number} r the amount by which to modify the value
* @param {String} [t] if `l` is a `Date`, the
* [interval](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Intervals.md#interval) in
* the `d3.time` namespace
* @returns {String|Date|Number}
*/
dc.utils.subtract = function (l, r, t) {
if (typeof r === 'string') {
r = r.replace('%', '');
}
if (l instanceof Date) {
if (typeof r === 'string') {
r = +r;
}
if (t === 'millis') {
return new Date(l.getTime() - r);
}
t = t || 'day';
return d3.time[t].offset(l, -r);
} else if (typeof r === 'string') {
var percentage = (+r / 100);
return l < 0 ? l * (1 + percentage) : l * (1 - percentage);
} else {
return l - r;
}
};
/**
* Is the value a number?
* @method isNumber
* @memberof dc.utils
* @param {any} n
* @returns {Boolean}
*/
dc.utils.isNumber = function (n) {
return n === +n;
};
/**
* Is the value a float?
* @method isFloat
* @memberof dc.utils
* @param {any} n
* @returns {Boolean}
*/
dc.utils.isFloat = function (n) {
return n === +n && n !== (n | 0);
};
/**
* Is the value an integer?
* @method isInteger
* @memberof dc.utils
* @param {any} n
* @returns {Boolean}
*/
dc.utils.isInteger = function (n) {
return n === +n && n === (n | 0);
};
/**
* Is the value very close to zero?
* @method isNegligible
* @memberof dc.utils
* @param {any} n
* @returns {Boolean}
*/
dc.utils.isNegligible = function (n) {
return !dc.utils.isNumber(n) || (n < dc.constants.NEGLIGIBLE_NUMBER && n > -dc.constants.NEGLIGIBLE_NUMBER);
};
/**
* Ensure the value is no greater or less than the min/max values. If it is return the boundary value.
* @method clamp
* @memberof dc.utils
* @param {any} val
* @param {any} min
* @param {any} max
* @returns {any}
*/
dc.utils.clamp = function (val, min, max) {
return val < min ? min : (val > max ? max : val);
};
/**
* Using a simple static counter, provide a unique integer id.
* @method uniqueId
* @memberof dc.utils
* @returns {Number}
*/
var _idCounter = 0;
dc.utils.uniqueId = function () {
return ++_idCounter;
};
/**
* Convert a name to an ID.
* @method nameToId
* @memberof dc.utils
* @param {String} name
* @returns {String}
*/
dc.utils.nameToId = function (name) {
return name.toLowerCase().replace(/[\s]/g, '_').replace(/[\.']/g, '');
};
/**
* Append or select an item on a parent element.
* @method appendOrSelect
* @memberof dc.utils
* @param {d3.selection} parent
* @param {String} selector
* @param {String} tag
* @returns {d3.selection}
*/
dc.utils.appendOrSelect = function (parent, selector, tag) {
tag = tag || selector;
var element = parent.select(selector);
if (element.empty()) {
element = parent.append(tag);
}
return element;
};
/**
* Return the number if the value is a number; else 0.
* @method safeNumber
* @memberof dc.utils
* @param {Number|any} n
* @returns {Number}
*/
dc.utils.safeNumber = function (n) { return dc.utils.isNumber(+n) ? +n : 0;};
dc.logger = {};
dc.logger.enableDebugLog = false;
dc.logger.warn = function (msg) {
if (console) {
if (console.warn) {
console.warn(msg);
} else if (console.log) {
console.log(msg);
}
}
return dc.logger;
};
dc.logger.debug = function (msg) {
if (dc.logger.enableDebugLog && console) {
if (console.debug) {
console.debug(msg);
} else if (console.log) {
console.log(msg);
}
}
return dc.logger;
};
dc.logger.deprecate = function (fn, msg) {
// Allow logging of deprecation
var warned = false;
function deprecated () {
if (!warned) {
dc.logger.warn(msg);
warned = true;
}
return fn.apply(this, arguments);
}
return deprecated;
};
dc.events = {
current: null
};
/**
* This function triggers a throttled event function with a specified delay (in milli-seconds). Events
* that are triggered repetitively due to user interaction such brush dragging might flood the library
* and invoke more renders than can be executed in time. Using this function to wrap your event
* function allows the library to smooth out the rendering by throttling events and only responding to
* the most recent event.
* @name events.trigger
* @memberof dc
* @example
* chart.on('renderlet', function(chart) {
* // smooth the rendering through event throttling
* dc.events.trigger(function(){
* // focus some other chart to the range selected by user on this chart
* someOtherChart.focus(chart.filter());
* });
* })
* @param {Function} closure
* @param {Number} [delay]
*/
dc.events.trigger = function (closure, delay) {
if (!delay) {
closure();
return;
}
dc.events.current = closure;
setTimeout(function () {
if (closure === dc.events.current) {
closure();
}
}, delay);
};
/**
* The dc.js filters are functions which are passed into crossfilter to chose which records will be
* accumulated to produce values for the charts. In the crossfilter model, any filters applied on one
* dimension will affect all the other dimensions but not that one. dc always applies a filter
* function to the dimension; the function combines multiple filters and if any of them accept a
* record, it is filtered in.
*
* These filter constructors are used as appropriate by the various charts to implement brushing. We
* mention below which chart uses which filter. In some cases, many instances of a filter will be added.
*
* Each of the dc.js filters is an object with the following properties:
* * `isFiltered` - a function that returns true if a value is within the filter
* * `filterType` - a string identifying the filter, here the name of the constructor
*
* Currently these filter objects are also arrays, but this is not a requirement. Custom filters
* can be used as long as they have the properties above.
* @namespace filters
* @memberof dc
* @type {{}}
*/
dc.filters = {};
/**
* RangedFilter is a filter which accepts keys between `low` and `high`. It is used to implement X
* axis brushing for the {@link dc.coordinateGridMixin coordinate grid charts}.
*
* Its `filterType` is 'RangedFilter'
* @name RangedFilter
* @memberof dc.filters
* @param {Number} low
* @param {Number} high
* @returns {Array<Number>}
* @constructor
*/
dc.filters.RangedFilter = function (low, high) {
var range = new Array(low, high);
range.isFiltered = function (value) {
return value >= this[0] && value < this[1];
};
range.filterType = 'RangedFilter';
return range;
};
/**
* TwoDimensionalFilter is a filter which accepts a single two-dimensional value. It is used by the
* {@link dc.heatMap heat map chart} to include particular cells as they are clicked. (Rows and columns are
* filtered by filtering all the cells in the row or column.)
*
* Its `filterType` is 'TwoDimensionalFilter'
* @name TwoDimensionalFilter
* @memberof dc.filters
* @param {Array<Number>} filter
* @returns {Array<Number>}
* @constructor
*/
dc.filters.TwoDimensionalFilter = function (filter) {
if (filter === null) { return null; }
var f = filter;
f.isFiltered = function (value) {
return value.length && value.length === f.length &&
value[0] === f[0] && value[1] === f[1];
};
f.filterType = 'TwoDimensionalFilter';
return f;
};
/**
* The RangedTwoDimensionalFilter allows filtering all values which fit within a rectangular
* region. It is used by the {@link dc.scatterPlot scatter plot} to implement rectangular brushing.
*
* It takes two two-dimensional points in the form `[[x1,y1],[x2,y2]]`, and normalizes them so that
* `x1 <= x2` and `y1 <= y2`. It then returns a filter which accepts any points which are in the
* rectangular range including the lower values but excluding the higher values.
*
* If an array of two values are given to the RangedTwoDimensionalFilter, it interprets the values as
* two x coordinates `x1` and `x2` and returns a filter which accepts any points for which `x1 <= x <
* x2`.
*
* Its `filterType` is 'RangedTwoDimensionalFilter'
* @name RangedTwoDimensionalFilter
* @memberof dc.filters
* @param {Array<Array<Number>>} filter
* @returns {Array<Array<Number>>}
* @constructor
*/
dc.filters.RangedTwoDimensionalFilter = function (filter) {
if (filter === null) { return null; }
var f = filter;
var fromBottomLeft;
if (f[0] instanceof Array) {
fromBottomLeft = [
[Math.min(filter[0][0], filter[1][0]), Math.min(filter[0][1], filter[1][1])],
[Math.max(filter[0][0], filter[1][0]), Math.max(filter[0][1], filter[1][1])]
];
} else {
fromBottomLeft = [[filter[0], -Infinity], [filter[1], Infinity]];
}
f.isFiltered = function (value) {
var x, y;
if (value instanceof Array) {
x = value[0];
y = value[1];
} else {
x = value;
y = fromBottomLeft[0][1];
}
return x >= fromBottomLeft[0][0] && x < fromBottomLeft[1][0] &&
y >= fromBottomLeft[0][1] && y < fromBottomLeft[1][1];
};
f.filterType = 'RangedTwoDimensionalFilter';
return f;
};
/**
* `dc.baseMixin` is an abstract functional object representing a basic `dc` chart object
* for all chart and widget implementations. Methods from the {@link #dc.baseMixin dc.baseMixin} are inherited
* and available on all chart implementations in the `dc` library.
* @name baseMixin
* @memberof dc
* @mixin
* @param {Object} _chart
* @returns {dc.baseMixin}
*/
dc.baseMixin = function (_chart) {
_chart.__dcFlag__ = dc.utils.uniqueId();
var _dimension;
var _group;
var _anchor;
var _root;
var _svg;
var _isChild;
var _minWidth = 200;
var _defaultWidthCalc = function (element) {
var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width;
return (width && width > _minWidth) ? width : _minWidth;
};
var _widthCalc = _defaultWidthCalc;
var _minHeight = 200;
var _defaultHeightCalc = function (element) {
var height = element && element.getBoundingClientRect && element.getBoundingClientRect().height;
return (height && height > _minHeight) ? height : _minHeight;
};
var _heightCalc = _defaultHeightCalc;
var _width, _height;
var _useViewBoxResizing = false;
var _keyAccessor = dc.pluck('key');
var _valueAccessor = dc.pluck('value');
var _label = dc.pluck('key');
var _ordering = dc.pluck('key');
var _orderSort;
var _renderLabel = false;
var _title = function (d) {
return _chart.keyAccessor()(d) + ': ' + _chart.valueAccessor()(d);
};
var _renderTitle = true;
var _controlsUseVisibility = false;
var _transitionDuration = 750;
var _transitionDelay = 0;
var _filterPrinter = dc.printers.filters;
var _mandatoryAttributes = ['dimension', 'group'];
var _chartGroup = dc.constants.DEFAULT_CHART_GROUP;
var _listeners = d3.dispatch(
'preRender',
'postRender',
'preRedraw',
'postRedraw',
'filtered',
'zoomed',
'renderlet',
'pretransition');
var _legend;
var _commitHandler;
var _filters = [];
var _filterHandler = function (dimension, filters) {
if (filters.length === 0) {
dimension.filter(null);
} else if (filters.length === 1 && !filters[0].isFiltered) {
// single value and not a function-based filter
dimension.filterExact(filters[0]);
} else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
// single range-based filter
dimension.filterRange(filters[0]);
} else {
dimension.filterFunction(function (d) {
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (filter.isFiltered && filter.isFiltered(d)) {
return true;
} else if (filter <= d && filter >= d) {
return true;
}
}
return false;
});
}
return filters;
};
var _data = function (group) {
return group.all();
};
/**
* Set or get the height attribute of a chart. The height is applied to the SVGElement generated by
* the chart when rendered (or re-rendered). If a value is given, then it will be used to calculate
* the new height and the chart returned for method chaining. The value can either be a numeric, a
* function, or falsy. If no value is specified then the value of the current height attribute will
* be returned.
*
* By default, without an explicit height being given, the chart will select the width of its
* anchor element. If that isn't possible it defaults to 200 (provided by the
* {@link dc.baseMixin#minHeight minHeight} property). Setting the value falsy will return
* the chart to the default behavior.
* @method height
* @memberof dc.baseMixin
* @instance
* @see {@link dc.baseMixin#minHeight minHeight}
* @example
* // Default height
* chart.height(function (element) {
* var height = element && element.getBoundingClientRect && element.getBoundingClientRect().height;
* return (height && height > chart.minHeight()) ? height : chart.minHeight();
* });
*
* chart.height(250); // Set the chart's height to 250px;
* chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
* chart.height(null); // reset the height to the default auto calculation
* @param {Number|Function} [height]
* @returns {Number|dc.baseMixin}
*/
_chart.height = function (height) {
if (!arguments.length) {
if (!dc.utils.isNumber(_height)) {
// only calculate once
_height = _heightCalc(_root.node());
}
return _height;
}
_heightCalc = d3.functor(height || _defaultHeightCalc);
_height = undefined;
return _chart;
};
/**
* Set or get the width attribute of a chart.
* @method width
* @memberof dc.baseMixin
* @instance
* @see {@link dc.baseMixin#height height}
* @see {@link dc.baseMixin#minWidth minWidth}
* @example
* // Default width
* chart.width(function (element) {
* var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width;
* return (width && width > chart.minWidth()) ? width : chart.minWidth();
* });
* @param {Number|Function} [width]
* @returns {Number|dc.baseMixin}
*/
_chart.width = function (width) {
if (!arguments.length) {
if (!dc.utils.isNumber(_width)) {
// only calculate once
_width = _widthCalc(_root.node());
}
return _width;
}
_widthCalc = d3.functor(width || _defaultWidthCalc);
_width = undefined;
return _chart;
};
/**
* Set or get the minimum width attribute of a chart. This only has effect when used with the default
* {@link dc.baseMixin#width width} function.
* @method minWidth
* @memberof dc.baseMixin
* @instance
* @see {@link dc.baseMixin#width width}
* @param {Number} [minWidth=200]
* @returns {Number|dc.baseMixin}
*/
_chart.minWidth = function (minWidth) {
if (!arguments.length) {
return _minWidth;
}
_minWidth = minWidth;
return _chart;
};
/**
* Set or get the minimum height attribute of a chart. This only has effect when used with the default
* {@link dc.baseMixin#height height} function.
* @method minHeight
* @memberof dc.baseMixin
* @instance
* @see {@link dc.baseMixin#height height}
* @param {Number} [minHeight=200]
* @returns {Number|dc.baseMixin}
*/
_chart.minHeight = function (minHeight) {
if (!arguments.length) {
return _minHeight;
}
_minHeight = minHeight;
return _chart;
};
/**
* Turn on/off using the SVG
* {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox `viewBox` attribute}.
* When enabled, `viewBox` will be set on the svg root element instead of `width` and `height`.
* Requires that the chart aspect ratio be defined using chart.width(w) and chart.height(h).
*
* This will maintain the aspect ratio while enabling the chart to resize responsively to the
* space given to the chart using CSS. For example, the chart can use `width: 100%; height:
* 100%` or absolute positioning to resize to its parent div.
*
* Since the text will be sized as if the chart is drawn according to the width and height, and
* will be resized if the chart is any other size, you need to set the chart width and height so
* that the text looks good. In practice, 600x400 seems to work pretty well for most charts.
*
* You can see examples of this resizing strategy in the [Chart Resizing
* Examples](http://dc-js.github.io/dc.js/resizing/); just add `?resize=viewbox` to any of the
* one-chart examples to enable `useViewBoxResizing`.
* @method useViewBoxResizing
* @memberof dc.baseMixin
* @instance
* @param {Boolean} [useViewBoxResizing=false]
* @returns {Boolean|dc.baseMixin}
*/
_chart.useViewBoxResizing = function (useViewBoxResizing) {
if (!arguments.length) {
return _useViewBoxResizing;
}
_useViewBoxResizing = useViewBoxResizing;
return _chart;
};
/**
* **mandatory**
*
* Set or get the dimension attribute of a chart. In `dc`, a dimension can be any valid
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#dimension crossfilter dimension}
*
* If a value is given, then it will be used as the new dimension. If no value is specified then
* the current dimension will be returned.
* @method dimension
* @memberof dc.baseMixin
* @instance
* @see {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#dimension crossfilter.dimension}
* @example
* var index = crossfilter([]);
* var dimension = index.dimension(dc.pluck('key'));
* chart.dimension(dimension);
* @param {crossfilter.dimension} [dimension]
* @returns {crossfilter.dimension|dc.baseMixin}
*/
_chart.dimension = function (dimension) {
if (!arguments.length) {
return _dimension;
}
_dimension = dimension;
_chart.expireCache();
return _chart;
};
/**
* Set the data callback or retrieve the chart's data set. The data callback is passed the chart's
* group and by default will return
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#group_all group.all}.
* This behavior may be modified to, for instance, return only the top 5 groups.
* @method data
* @memberof dc.baseMixin
* @instance
* @example
* // Default data function
* chart.data(function (group) { return group.all(); });
*
* chart.data(function (group) { return group.top(5); });
* @param {Function} [callback]
* @returns {*|dc.baseMixin}
*/
_chart.data = function (callback) {
if (!arguments.length) {
return _data.call(_chart, _group);
}
_data = d3.functor(callback);
_chart.expireCache();
return _chart;
};
/**
* **mandatory**
*
* Set or get the group attribute of a chart. In `dc` a group is a
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#group-map-reduce crossfilter group}.
* Usually the group should be created from the particular dimension associated with the same chart. If a value is
* given, then it will be used as the new group.
*
* If no value specified then the current group will be returned.
* If `name` is specified then it will be used to generate legend label.
* @method group
* @memberof dc.baseMixin
* @instance
* @see {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#group-map-reduce crossfilter.group}
* @example
* var index = crossfilter([]);
* var dimension = index.dimension(dc.pluck('key'));
* chart.dimension(dimension);
* chart.group(dimension.group(crossfilter.reduceSum()));
* @param {crossfilter.group} [group]
* @param {String} [name]
* @returns {crossfilter.group|dc.baseMixin}
*/
_chart.group = function (group, name) {
if (!arguments.length) {
return _group;
}
_group = group;
_chart._groupName = name;
_chart.expireCache();
return _chart;
};
/**
* Get or set an accessor to order ordinal dimensions. The chart uses
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#quicksort_by crossfilter.quicksort.by}
* to sort elements; this accessor returns the value to order on.
* @method ordering
* @memberof dc.baseMixin
* @instance
* @see {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#quicksort_by crossfilter.quicksort.by}
* @example
* // Default ordering accessor
* _chart.ordering(dc.pluck('key'));
* @param {Function} [orderFunction]
* @returns {Function|dc.baseMixin}
*/
_chart.ordering = function (orderFunction) {
if (!arguments.length) {
return _ordering;
}
_ordering = orderFunction;
_orderSort = crossfilter.quicksort.by(_ordering);
_chart.expireCache();
return _chart;
};
_chart._computeOrderedGroups = function (data) {
var dataCopy = data.slice(0);
if (dataCopy.length <= 1) {
return dataCopy;
}
if (!_orderSort) {
_orderSort = crossfilter.quicksort.by(_ordering);
}
return _orderSort(dataCopy, 0, dataCopy.length);
};
/**
* Clear all filters associated with this chart. The same effect can be achieved by calling
* {@link dc.baseMixin#filter chart.filter(null)}.
* @method filterAll
* @memberof dc.baseMixin
* @instance
* @returns {dc.baseMixin}
*/
_chart.filterAll = function () {
return _chart.filter(null);
};
/**
* Execute d3 single selection in the chart's scope using the given selector and return the d3
* selection.
*
* This function is **not chainable** since it does not return a chart instance; however the d3
* selection result can be chained to d3 function calls.
* @method select
* @memberof dc.baseMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#d3_select d3.select}
* @example
* // Has the same effect as d3.select('#chart-id').select(selector)
* chart.select(selector)
* @returns {d3.selection}
*/
_chart.select = function (s) {
return _root.select(s);
};
/**
* Execute in scope d3 selectAll using the given selector and return d3 selection result.
*
* This function is **not chainable** since it does not return a chart instance; however the d3
* selection result can be chained to d3 function calls.
* @method selectAll
* @memberof dc.baseMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#d3_selectAll d3.selectAll}
* @example
* // Has the same effect as d3.select('#chart-id').selectAll(selector)
* chart.selectAll(selector)
* @returns {d3.selection}
*/
_chart.selectAll = function (s) {
return _root ? _root.selectAll(s) : null;
};
/**
* Set the root SVGElement to either be an existing chart's root; or any valid [d3 single
* selector](https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements) specifying a dom
* block element such as a div; or a dom element or d3 selection. Optionally registers the chart
* within the chartGroup. This class is called internally on chart initialization, but be called
* again to relocate the chart. However, it will orphan any previously created SVGElements.
* @method anchor
* @memberof dc.baseMixin
* @instance
* @param {anchorChart|anchorSelector|anchorNode} [parent]
* @param {String} [chartGroup]
* @returns {String|node|d3.selection|dc.baseMixin}
*/
_chart.anchor = function (parent, chartGroup) {
if (!arguments.length) {
return _anchor;
}
if (dc.instanceOfChart(parent)) {
_anchor = parent.anchor();
_root = parent.root();
_isChild = true;
} else if (parent) {
if (parent.select && parent.classed) { // detect d3 selection
_anchor = parent.node();
} else {
_anchor = parent;
}
_root = d3.select(_anchor);
_root.classed(dc.constants.CHART_CLASS, true);
dc.registerChart(_chart, chartGroup);
_isChild = false;
} else {
throw new dc.errors.BadArgumentException('parent must be defined');
}
_chartGroup = chartGroup;
return _chart;
};
/**
* Returns the DOM id for the chart's anchored location.
* @method anchorName
* @memberof dc.baseMixin
* @instance
* @returns {String}
*/
_chart.anchorName = function () {
var a = _chart.anchor();
if (a && a.id) {
return a.id;
}
if (a && a.replace) {
return a.replace('#', '');
}
return 'dc-chart' + _chart.chartID();
};
/**
* Returns the root element where a chart resides. Usually it will be the parent div element where
* the SVGElement was created. You can also pass in a new root element however this is usually handled by
* dc internally. Resetting the root element on a chart outside of dc internals may have
* unexpected consequences.
* @method root
* @memberof dc.baseMixin
* @instance
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement}
* @param {HTMLElement} [rootElement]
* @returns {HTMLElement|dc.baseMixin}
*/
_chart.root = function (rootElement) {
if (!arguments.length) {
return _root;
}
_root = rootElement;
return _chart;
};
/**
* Returns the top SVGElement for this specific chart. You can also pass in a new SVGElement,
* however this is usually handled by dc internally. Resetting the SVGElement on a chart outside
* of dc internals may have unexpected consequences.
* @method svg
* @memberof dc.baseMixin
* @instance
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGElement SVGElement}
* @param {SVGElement|d3.selection} [svgElement]
* @returns {SVGElement|d3.selection|dc.baseMixin}
*/
_chart.svg = function (svgElement) {
if (!arguments.length) {
return _svg;
}
_svg = svgElement;
return _chart;
};
/**
* Remove the chart's SVGElements from the dom and recreate the container SVGElement.
* @method resetSvg
* @memberof dc.baseMixin
* @instance
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGElement SVGElement}
* @returns {SVGElement}
*/
_chart.resetSvg = function () {
_chart.select('svg').remove();
return generateSvg();
};
function sizeSvg () {
if (_svg) {
if (!_useViewBoxResizing) {
_svg
.attr('width', _chart.width())
.attr('height', _chart.height());
} else if (!_svg.attr('viewBox')) {
_svg
.attr('viewBox', '0 0 ' + _chart.width() + ' ' + _chart.height());
}
}
}
function generateSvg () {
_svg = _chart.root().append('svg');
sizeSvg();
return _svg;
}
/**
* Set or get the filter printer function. The filter printer function is used to generate human
* friendly text for filter value(s) associated with the chart instance. The text will get shown
* in the `.filter element; see {@link dc.baseMixin#turnOnControls turnOnControls}.
*
* By default dc charts use a default filter printer {@link dc.printers.filters dc.printers.filters}
* that provides simple printing support for both single value and ranged filters.
* @method filterPrinter
* @memberof dc.baseMixin
* @instance
* @example
* // for a chart with an ordinal brush, print the filters in upper case
* chart.filterPrinter(function(filters) {
* return filters.map(function(f) { return f.toUpperCase(); }).join(', ');
* });
* // for a chart with a range brush, print the filter as start and extent
* chart.filterPrinter(function(filters) {
* return 'start ' + dc.utils.printSingleValue(filters[0][0]) +
* ' extent ' + dc.utils.printSingleValue(filters[0][1] - filters[0][0]);
* });
* @param {Function} [filterPrinterFunction=dc.printers.filters]
* @returns {Function|dc.baseMixin}
*/
_chart.filterPrinter = function (filterPrinterFunction) {
if (!arguments.length) {
return _filterPrinter;
}
_filterPrinter = filterPrinterFunction;
return _chart;
};
/**
* If set, use the `visibility` attribute instead of the `display` attribute for showing/hiding
* chart reset and filter controls, for less disruption to the layout.
* @method controlsUseVisibility
* @memberof dc.baseMixin
* @instance
* @param {Boolean} [controlsUseVisibility=false]
* @returns {Boolean|dc.baseMixin}
**/
_chart.controlsUseVisibility = function (useVisibility) {
if (!arguments.length) {
return _controlsUseVisibility;
}
_controlsUseVisibility = useVisibility;
return _chart;
};
/**
* Turn on optional control elements within the root element. dc currently supports the
* following html control elements.
* * root.selectAll('.reset') - elements are turned on if the chart has an active filter. This type
* of control element is usually used to store a reset link to allow user to reset filter on a
* certain chart. This element will be turned off automatically if the filter is cleared.
* * root.selectAll('.filter') elements are turned on if the chart has an active filter. The text
* content of this element is then replaced with the current filter value using the filter printer
* function. This type of element will be turned off automatically if the filter is cleared.
* @method turnOnControls
* @memberof dc.baseMixin
* @instance
* @returns {dc.baseMixin}
*/
_chart.turnOnControls = function () {
if (_root) {
var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
_chart.selectAll('.reset').style(attribute, null);
_chart.selectAll('.filter').text(_filterPrinter(_chart.filters())).style(attribute, null);
}
return _chart;
};
/**
* Turn off optional control elements within the root element.
* @method turnOffControls
* @memberof dc.baseMixin
* @see {@link dc.baseMixin#turnOnControls turnOnControls}
* @instance
* @returns {dc.baseMixin}
*/
_chart.turnOffControls = function () {
if (_root) {
var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
var value = _chart.controlsUseVisibility() ? 'hidden' : 'none';
_chart.selectAll('.reset').style(attribute, value);
_chart.selectAll('.filter').style(attribute, value).text(_chart.filter());
}
return _chart;
};
/**
* Set or get the animation transition duration (in milliseconds) for this chart instance.
* @method transitionDuration
* @memberof dc.baseMixin
* @instance
* @param {Number} [duration=750]
* @returns {Number|dc.baseMixin}
*/
_chart.transitionDuration = function (duration) {
if (!arguments.length) {
return _transitionDuration;
}
_transitionDuration = duration;
return _chart;
};
/**
* Set or get the animation transition delay (in milliseconds) for this chart instance.
* @method transitionDelay
* @memberof dc.baseMixin
* @instance
* @param {Number} [delay=0]
* @returns {Number|dc.baseMixin}
*/
_chart.transitionDelay = function (delay) {
if (!arguments.length) {
return _transitionDelay;
}
_transitionDelay = delay;
return _chart;
};
_chart._mandatoryAttributes = function (_) {
if (!arguments.length) {
return _mandatoryAttributes;
}
_mandatoryAttributes = _;
return _chart;
};
function checkForMandatoryAttributes (a) {
if (!_chart[a] || !_chart[a]()) {
throw new dc.errors.InvalidStateException('Mandatory attribute chart.' + a +
' is missing on chart[#' + _chart.anchorName() + ']');
}
}
/**
* Invoking this method will force the chart to re-render everything from scratch. Generally it
* should only be used to render the chart for the first time on the page or if you want to make
* sure everything is redrawn from scratch instead of relying on the default incremental redrawing
* behaviour.
* @method render
* @memberof dc.baseMixin
* @instance
* @returns {dc.baseMixin}
*/
_chart.render = function () {
_height = _width = undefined; // force recalculate
_listeners.preRender(_chart);
if (_mandatoryAttributes) {
_mandatoryAttributes.forEach(checkForMandatoryAttributes);
}
var result = _chart._doRender();
if (_legend) {
_legend.render();
}
_chart._activateRenderlets('postRender');
return result;
};
_chart._activateRenderlets = function (event) {
_listeners.pretransition(_chart);
if (_chart.transitionDuration() > 0 && _svg) {
_svg.transition().duration(_chart.transitionDuration()).delay(_chart.transitionDelay())
.each('end', function () {
_listeners.renderlet(_chart);
if (event) {
_listeners[event](_chart);
}
});
} else {
_listeners.renderlet(_chart);
if (event) {
_listeners[event](_chart);
}
}
};
/**
* Calling redraw will cause the chart to re-render data changes incrementally. If there is no
* change in the underlying data dimension then calling this method will have no effect on the
* chart. Most chart interaction in dc will automatically trigger this method through internal
* events (in particular {@link dc.redrawAll dc.redrawAll}); therefore, you only need to
* manually invoke this function if data is manipulated outside of dc's control (for example if
* data is loaded in the background using
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#crossfilter_add crossfilter.add}).
* @method redraw
* @memberof dc.baseMixin
* @instance
* @returns {dc.baseMixin}
*/
_chart.redraw = function () {
sizeSvg();
_listeners.preRedraw(_chart);
var result = _chart._doRedraw();
if (_legend) {
_legend.render();
}
_chart._activateRenderlets('postRedraw');
return result;
};
/**
* Gets/sets the commit handler. If the chart has a commit handler, the handler will be called when
* the chart's filters have changed, in order to send the filter data asynchronously to a server.
*
* Unlike other functions in dc.js, the commit handler is asynchronous. It takes two arguments:
* a flag indicating whether this is a render (true) or a redraw (false), and a callback to be
* triggered once the commit is filtered. The callback has the standard node.js continuation signature
* with error first and result second.
* @method commitHandler
* @memberof dc.baseMixin
* @instance
* @returns {dc.baseMixin}
*/
_chart.commitHandler = function (commitHandler) {
if (!arguments.length) {
return _commitHandler;
}
_commitHandler = commitHandler;
return _chart;
};
/**
* Redraws all charts in the same group as this chart, typically in reaction to a filter
* change. If the chart has a {@link dc.baseMixin.commitFilter commitHandler}, it will
* be executed and waited for.
* @method redrawGroup
* @memberof dc.baseMixin
* @instance
* @returns {dc.baseMixin}
*/
_chart.redrawGroup = function () {
if (_commitHandler) {
_commitHandler(false, function (error, result) {
if (error) {
console.log(error);
} else {
dc.redrawAll(_chart.chartGroup());
}
});
} else {
dc.redrawAll(_chart.chartGroup());
}
return _chart;
};
/**
* Renders all charts in the same group as this chart. If the chart has a
* {@link dc.baseMixin.commitFilter commitHandler}, it will be executed and waited for
* @method renderGroup
* @memberof dc.baseMixin
* @instance
* @returns {dc.baseMixin}
*/
_chart.renderGroup = function () {
if (_commitHandler) {
_commitHandler(false, function (error, result) {
if (error) {
console.log(error);
} else {
dc.renderAll(_chart.chartGroup());
}
});
} else {
dc.renderAll(_chart.chartGroup());
}
return _chart;
};
_chart._invokeFilteredListener = function (f) {
if (f !== undefined) {
_listeners.filtered(_chart, f);
}
};
_chart._invokeZoomedListener = function () {
_listeners.zoomed(_chart);
};
var _hasFilterHandler = function (filters, filter) {
if (filter === null || typeof(filter) === 'undefined') {
return filters.length > 0;
}
return filters.some(function (f) {
return filter <= f && filter >= f;
});
};
/**
* Set or get the has-filter handler. The has-filter handler is a function that checks to see if
* the chart's current filters (first argument) include a specific filter (second argument). Using a custom has-filter handler allows
* you to change the way filters are checked for and replaced.
* @method hasFilterHandler
* @memberof dc.baseMixin
* @instance
* @example
* // default has-filter handler
* chart.hasFilterHandler(function (filters, filter) {
* if (filter === null || typeof(filter) === 'undefined') {
* return filters.length > 0;
* }
* return filters.some(function (f) {
* return filter <= f && filter >= f;
* });
* });
*
* // custom filter handler (no-op)
* chart.hasFilterHandler(function(filters, filter) {
* return false;
* });
* @param {Function} [hasFilterHandler]
* @returns {Function|dc.baseMixin}
*/
_chart.hasFilterHandler = function (hasFilterHandler) {
if (!arguments.length) {
return _hasFilterHandler;
}
_hasFilterHandler = hasFilterHandler;
return _chart;
};
/**
* Check whether any active filter or a specific filter is associated with particular chart instance.
* This function is **not chainable**.
* @method hasFilter
* @memberof dc.baseMixin
* @instance
* @see {@link dc.baseMixin#hasFilterHandler hasFilterHandler}
* @param {*} [filter]
* @returns {Boolean}
*/
_chart.hasFilter = function (filter) {
return _hasFilterHandler(_filters, filter);
};
var _removeFilterHandler = function (filters, filter) {
for (var i = 0; i < filters.length; i++) {
if (filters[i] <= filter && filters[i] >= filter) {
filters.splice(i, 1);
break;
}
}
return filters;
};
/**
* Set or get the remove filter handler. The remove filter handler is a function that removes a
* filter from the chart's current filters. Using a custom remove filter handler allows you to
* change how filters are removed or perform additional work when removing a filter, e.g. when
* using a filter server other than crossfilter.
*
* The handler should return a new or modified array as the result.
* @method removeFilterHandler
* @memberof dc.baseMixin
* @instance
* @example
* // default remove filter handler
* chart.removeFilterHandler(function (filters, filter) {
* for (var i = 0; i < filters.length; i++) {
* if (filters[i] <= filter && filters[i] >= filter) {
* filters.splice(i, 1);
* break;
* }
* }
* return filters;
* });
*
* // custom filter handler (no-op)
* chart.removeFilterHandler(function(filters, filter) {
* return filters;
* });
* @param {Function} [removeFilterHandler]
* @returns {Function|dc.baseMixin}
*/
_chart.removeFilterHandler = function (removeFilterHandler) {
if (!arguments.length) {
return _removeFilterHandler;
}
_removeFilterHandler = removeFilterHandler;
return _chart;
};
var _addFilterHandler = function (filters, filter) {
filters.push(filter);
return filters;
};
/**
* Set or get the add filter handler. The add filter handler is a function that adds a filter to
* the chart's filter list. Using a custom add filter handler allows you to change the way filters
* are added or perform additional work when adding a filter, e.g. when using a filter server other
* than crossfilter.
*
* The handler should return a new or modified array as the result.
* @method addFilterHandler
* @memberof dc.baseMixin
* @instance
* @example
* // default add filter handler
* chart.addFilterHandler(function (filters, filter) {
* filters.push(filter);
* return filters;
* });
*
* // custom filter handler (no-op)
* chart.addFilterHandler(function(filters, filter) {
* return filters;
* });
* @param {Function} [addFilterHandler]
* @returns {Function|dc.baseMixin}
*/
_chart.addFilterHandler = function (addFilterHandler) {
if (!arguments.length) {
return _addFilterHandler;
}
_addFilterHandler = addFilterHandler;
return _chart;
};
var _resetFilterHandler = function (filters) {
return [];
};
/**
* Set or get the reset filter handler. The reset filter handler is a function that resets the
* chart's filter list by returning a new list. Using a custom reset filter handler allows you to
* change the way filters are reset, or perform additional work when resetting the filters,
* e.g. when using a filter server other than crossfilter.
*
* The handler should return a new or modified array as the result.
* @method resetFilterHandler
* @memberof dc.baseMixin
* @instance
* @example
* // default remove filter handler
* function (filters) {
* return [];
* }
*
* // custom filter handler (no-op)
* chart.resetFilterHandler(function(filters) {
* return filters;
* });
* @param {Function} [resetFilterHandler]
* @returns {dc.baseMixin}
*/
_chart.resetFilterHandler = function (resetFilterHandler) {
if (!arguments.length) {
return _resetFilterHandler;
}
_resetFilterHandler = resetFilterHandler;
return _chart;
};
function applyFilters (filters) {
if (_chart.dimension() && _chart.dimension().filter) {
var fs = _filterHandler(_chart.dimension(), filters);
if (fs) {
filters = fs;
}
}
return filters;
}
/**
* Replace the chart filter. This is equivalent to calling `chart.filter(null).filter(filter)`
* but more efficient because the filter is only applied once.
*
* @method replaceFilter
* @memberof dc.baseMixin
* @instance
* @param {*} [filter]
* @returns {dc.baseMixin}
**/
_chart.replaceFilter = function (filter) {
_filters = _resetFilterHandler(_filters);
_chart.filter(filter);
return _chart;
};
/**
* Filter the chart by the given parameter, or return the current filter if no input parameter
* is given.
*
* The filter parameter can take one of these forms:
* * A single value: the value will be toggled (added if it is not present in the current
* filters, removed if it is present)
* * An array containing a single array of values (`[[value,value,value]]`): each value is
* toggled
* * When appropriate for the chart, a {@link dc.filters dc filter object} such as
* * {@link dc.filters.RangedFilter `dc.filters.RangedFilter`} for the
* {@link dc.coordinateGridMixin dc.coordinateGridMixin} charts
* * {@link dc.filters.TwoDimensionalFilter `dc.filters.TwoDimensionalFilter`} for the
* {@link dc.heatMap heat map}
* * {@link dc.filters.RangedTwoDimensionalFilter `dc.filters.RangedTwoDimensionalFilter`}
* for the {@link dc.scatterPlot scatter plot}
* * `null`: the filter will be reset using the
* {@link dc.baseMixin#resetFilterHandler resetFilterHandler}
*
* Note that this is always a toggle (even when it doesn't make sense for the filter type). If
* you wish to replace the current filter, either call `chart.filter(null)` first - or it's more
* efficient to call {@link dc.baseMixin#replaceFilter `chart.replaceFilter(filter)`} instead.
*
* Each toggle is executed by checking if the value is already present using the
* {@link dc.baseMixin#hasFilterHandler hasFilterHandler}; if it is not present, it is added
* using the {@link dc.baseMixin#addFilterHandler addFilterHandler}; if it is already present,
* it is removed using the {@link dc.baseMixin#removeFilterHandler removeFilterHandler}.
*
* Once the filters array has been updated, the filters are applied to the
* crossfilter dimension, using the {@link dc.baseMixin#filterHandler filterHandler}.
*
* Once you have set the filters, call {@link dc.baseMixin#redrawGroup `chart.redrawGroup()`}
* (or {@link dc.redrawAll `dc.redrawAll()`}) to redraw the chart's group.
* @method filter
* @memberof dc.baseMixin
* @instance
* @see {@link dc.baseMixin#addFilterHandler addFilterHandler}
* @see {@link dc.baseMixin#removeFilterHandler removeFilterHandler}
* @see {@link dc.baseMixin#resetFilterHandler resetFilterHandler}
* @see {@link dc.baseMixin#filterHandler filterHandler}
* @example
* // filter by a single string
* chart.filter('Sunday');
* // filter by a single age
* chart.filter(18);
* // filter by a set of states
* chart.filter([['MA', 'TX', 'ND', 'WA']]);
* // filter by range -- note the use of dc.filters.RangedFilter, which is different
* // from the syntax for filtering a crossfilter dimension directly, dimension.filter([15,20])
* chart.filter(dc.filters.RangedFilter(15,20));
* @param {*} [filter]
* @returns {dc.baseMixin}
*/
_chart.filter = function (filter) {
if (!arguments.length) {
return _filters.length > 0 ? _filters[0] : null;
}
var filters = _filters;
if (filter instanceof Array && filter[0] instanceof Array && !filter.isFiltered) {
// toggle each filter
filter[0].forEach(function (f) {
if (_hasFilterHandler(filters, f)) {
filters = _removeFilterHandler(filters, f);
} else {
filters = _addFilterHandler(filters, f);
}
});
} else if (filter === null) {
filters = _resetFilterHandler(filters);
} else {
if (_hasFilterHandler(filters, filter)) {
filters = _removeFilterHandler(filters, filter);
} else {
filters = _addFilterHandler(filters, filter);
}
}
_filters = applyFilters(filters);
_chart._invokeFilteredListener(filter);
if (_root !== null && _chart.hasFilter()) {
_chart.turnOnControls();
} else {
_chart.turnOffControls();
}
return _chart;
};
/**
* Returns all current filters. This method does not perform defensive cloning of the internal
* filter array before returning, therefore any modification of the returned array will effect the
* chart's internal filter storage.
* @method filters
* @memberof dc.baseMixin
* @instance
* @returns {Array<*>}
*/
_chart.filters = function () {
return _filters;
};
_chart.highlightSelected = function (e) {
d3.select(e).classed(dc.constants.SELECTED_CLASS, true);
d3.select(e).classed(dc.constants.DESELECTED_CLASS, false);
};
_chart.fadeDeselected = function (e) {
d3.select(e).classed(dc.constants.SELECTED_CLASS, false);
d3.select(e).classed(dc.constants.DESELECTED_CLASS, true);
};
_chart.resetHighlight = function (e) {
d3.select(e).classed(dc.constants.SELECTED_CLASS, false);
d3.select(e).classed(dc.constants.DESELECTED_CLASS, false);
};
/**
* This function is passed to d3 as the onClick handler for each chart. The default behavior is to
* filter on the clicked datum (passed to the callback) and redraw the chart group.
* @method onClick
* @memberof dc.baseMixin
* @instance
* @param {*} datum
*/
_chart.onClick = function (datum) {
var filter = _chart.keyAccessor()(datum);
dc.events.trigger(function () {
_chart.filter(filter);
_chart.redrawGroup();
});
};
/**
* Set or get the filter handler. The filter handler is a function that performs the filter action
* on a specific dimension. Using a custom filter handler allows you to perform additional logic
* before or after filtering.
* @method filterHandler
* @memberof dc.baseMixin
* @instance
* @see {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#dimension_filter crossfilter.dimension.filter}
* @example
* // the default filter handler handles all possible cases for the charts in dc.js
* // you can replace it with something more specialized for your own chart
* chart.filterHandler(function (dimension, filters) {
* if (filters.length === 0) {
* // the empty case (no filtering)
* dimension.filter(null);
* } else if (filters.length === 1 && !filters[0].isFiltered) {
* // single value and not a function-based filter
* dimension.filterExact(filters[0]);
* } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
* // single range-based filter
* dimension.filterRange(filters[0]);
* } else {
* // an array of values, or an array of filter objects
* dimension.filterFunction(function (d) {
* for (var i = 0; i < filters.length; i++) {
* var filter = filters[i];
* if (filter.isFiltered && filter.isFiltered(d)) {
* return true;
* } else if (filter <= d && filter >= d) {
* return true;
* }
* }
* return false;
* });
* }
* return filters;
* });
*
* // custom filter handler
* chart.filterHandler(function(dimension, filter){
* var newFilter = filter + 10;
* dimension.filter(newFilter);
* return newFilter; // set the actual filter value to the new value
* });
* @param {Function} [filterHandler]
* @returns {Function|dc.baseMixin}
*/
_chart.filterHandler = function (filterHandler) {
if (!arguments.length) {
return _filterHandler;
}
_filterHandler = filterHandler;
return _chart;
};
// abstract function stub
_chart._doRender = function () {
// do nothing in base, should be overridden by sub-function
return _chart;
};
_chart._doRedraw = function () {
// do nothing in base, should be overridden by sub-function
return _chart;
};
_chart.legendables = function () {
// do nothing in base, should be overridden by sub-function
return [];
};
_chart.legendHighlight = function () {
// do nothing in base, should be overridden by sub-function
};
_chart.legendReset = function () {
// do nothing in base, should be overridden by sub-function
};
_chart.legendToggle = function () {
// do nothing in base, should be overriden by sub-function
};
_chart.isLegendableHidden = function () {
// do nothing in base, should be overridden by sub-function
return false;
};
/**
* Set or get the key accessor function. The key accessor function is used to retrieve the key
* value from the crossfilter group. Key values are used differently in different charts, for
* example keys correspond to slices in a pie chart and x axis positions in a grid coordinate chart.
* @method keyAccessor
* @memberof dc.baseMixin
* @instance
* @example
* // default key accessor
* chart.keyAccessor(function(d) { return d.key; });
* // custom key accessor for a multi-value crossfilter reduction
* chart.keyAccessor(function(p) { return p.value.absGain; });
* @param {Function} [keyAccessor]
* @returns {Function|dc.baseMixin}
*/
_chart.keyAccessor = function (keyAccessor) {
if (!arguments.length) {
return _keyAccessor;
}
_keyAccessor = keyAccessor;
return _chart;
};
/**
* Set or get the value accessor function. The value accessor function is used to retrieve the
* value from the crossfilter group. Group values are used differently in different charts, for
* example values correspond to slice sizes in a pie chart and y axis positions in a grid
* coordinate chart.
* @method valueAccessor
* @memberof dc.baseMixin
* @instance
* @example
* // default value accessor
* chart.valueAccessor(function(d) { return d.value; });
* // custom value accessor for a multi-value crossfilter reduction
* chart.valueAccessor(function(p) { return p.value.percentageGain; });
* @param {Function} [valueAccessor]
* @returns {Function|dc.baseMixin}
*/
_chart.valueAccessor = function (valueAccessor) {
if (!arguments.length) {
return _valueAccessor;
}
_valueAccessor = valueAccessor;
return _chart;
};
/**
* Set or get the label function. The chart class will use this function to render labels for each
* child element in the chart, e.g. slices in a pie chart or bubbles in a bubble chart. Not every
* chart supports the label function, for example line chart does not use this function
* at all. By default, enables labels; pass false for the second parameter if this is not desired.
* @method label
* @memberof dc.baseMixin
* @instance
* @example
* // default label function just return the key
* chart.label(function(d) { return d.key; });
* // label function has access to the standard d3 data binding and can get quite complicated
* chart.label(function(d) { return d.data.key + '(' + Math.floor(d.data.value / all.value() * 100) + '%)'; });
* @param {Function} [labelFunction]
* @param {Boolean} [enableLabels=true]
* @returns {Function|dc.baseMixin}
*/
_chart.label = function (labelFunction, enableLabels) {
if (!arguments.length) {
return _label;
}
_label = labelFunction;
if ((enableLabels === undefined) || enableLabels) {
_renderLabel = true;
}
return _chart;
};
/**
* Turn on/off label rendering
* @method renderLabel
* @memberof dc.baseMixin
* @instance
* @param {Boolean} [renderLabel=false]
* @returns {Boolean|dc.baseMixin}
*/
_chart.renderLabel = function (renderLabel) {
if (!arguments.length) {
return _renderLabel;
}
_renderLabel = renderLabel;
return _chart;
};
/**
* Set or get the title function. The chart class will use this function to render the SVGElement title
* (usually interpreted by browser as tooltips) for each child element in the chart, e.g. a slice
* in a pie chart or a bubble in a bubble chart. Almost every chart supports the title function;
* however in grid coordinate charts you need to turn off the brush in order to see titles, because
* otherwise the brush layer will block tooltip triggering.
* @method title
* @memberof dc.baseMixin
* @instance
* @example
* // default title function shows "key: value"
* chart.title(function(d) { return d.key + ': ' + d.value; });
* // title function has access to the standard d3 data binding and can get quite complicated
* chart.title(function(p) {
* return p.key.getFullYear()
* + '\n'
* + 'Index Gain: ' + numberFormat(p.value.absGain) + '\n'
* + 'Index Gain in Percentage: ' + numberFormat(p.value.percentageGain) + '%\n'
* + 'Fluctuation / Index Ratio: ' + numberFormat(p.value.fluctuationPercentage) + '%';
* });
* @param {Function} [titleFunction]
* @returns {Function|dc.baseMixin}
*/
_chart.title = function (titleFunction) {
if (!arguments.length) {
return _title;
}
_title = titleFunction;
return _chart;
};
/**
* Turn on/off title rendering, or return the state of the render title flag if no arguments are
* given.
* @method renderTitle
* @memberof dc.baseMixin
* @instance
* @param {Boolean} [renderTitle=true]
* @returns {Boolean|dc.baseMixin}
*/
_chart.renderTitle = function (renderTitle) {
if (!arguments.length) {
return _renderTitle;
}
_renderTitle = renderTitle;
return _chart;
};
/**
* A renderlet is similar to an event listener on rendering event. Multiple renderlets can be added
* to an individual chart. Each time a chart is rerendered or redrawn the renderlets are invoked
* right after the chart finishes its transitions, giving you a way to modify the SVGElements.
* Renderlet functions take the chart instance as the only input parameter and you can
* use the dc API or use raw d3 to achieve pretty much any effect.
*
* Use {@link dc.baseMixin#on on} with a 'renderlet' prefix.
* Generates a random key for the renderlet, which makes it hard to remove.
* @method renderlet
* @memberof dc.baseMixin
* @instance
* @deprecated
* @example
* // do this instead of .renderlet(function(chart) { ... })
* chart.on("renderlet", function(chart){
* // mix of dc API and d3 manipulation
* chart.select('g.y').style('display', 'none');
* // its a closure so you can also access other chart variable available in the closure scope
* moveChart.filter(chart.filter());
* });
* @param {Function} renderletFunction
* @returns {dc.baseMixin}
*/
_chart.renderlet = dc.logger.deprecate(function (renderletFunction) {
_chart.on('renderlet.' + dc.utils.uniqueId(), renderletFunction);
return _chart;
}, 'chart.renderlet has been deprecated. Please use chart.on("renderlet.<renderletKey>", renderletFunction)');
/**
* Get or set the chart group to which this chart belongs. Chart groups are rendered or redrawn
* together since it is expected they share the same underlying crossfilter data set.
* @method chartGroup
* @memberof dc.baseMixin
* @instance
* @param {String} [chartGroup]
* @returns {String|dc.baseMixin}
*/
_chart.chartGroup = function (chartGroup) {
if (!arguments.length) {
return _chartGroup;
}
if (!_isChild) {
dc.deregisterChart(_chart, _chartGroup);
}
_chartGroup = chartGroup;
if (!_isChild) {
dc.registerChart(_chart, _chartGroup);
}
return _chart;
};
/**
* Expire the internal chart cache. dc charts cache some data internally on a per chart basis to
* speed up rendering and avoid unnecessary calculation; however it might be useful to clear the
* cache if you have changed state which will affect rendering. For example, if you invoke
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#crossfilter_add crossfilter.add}
* function or reset group or dimension after rendering, it is a good idea to
* clear the cache to make sure charts are rendered properly.
* @method expireCache
* @memberof dc.baseMixin
* @instance
* @returns {dc.baseMixin}
*/
_chart.expireCache = function () {
// do nothing in base, should be overridden by sub-function
return _chart;
};
/**
* Attach a dc.legend widget to this chart. The legend widget will automatically draw legend labels
* based on the color setting and names associated with each group.
* @method legend
* @memberof dc.baseMixin
* @instance
* @example
* chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
* @param {dc.legend} [legend]
* @returns {dc.legend|dc.baseMixin}
*/
_chart.legend = function (legend) {
if (!arguments.length) {
return _legend;
}
_legend = legend;
_legend.parent(_chart);
return _chart;
};
/**
* Returns the internal numeric ID of the chart.
* @method chartID
* @memberof dc.baseMixin
* @instance
* @returns {String}
*/
_chart.chartID = function () {
return _chart.__dcFlag__;
};
/**
* Set chart options using a configuration object. Each key in the object will cause the method of
* the same name to be called with the value to set that attribute for the chart.
* @method options
* @memberof dc.baseMixin
* @instance
* @example
* chart.options({dimension: myDimension, group: myGroup});
* @param {{}} opts
* @returns {dc.baseMixin}
*/
_chart.options = function (opts) {
var applyOptions = [
'anchor',
'group',
'xAxisLabel',
'yAxisLabel',
'stack',
'title',
'point',
'getColor',
'overlayGeoJson'
];
for (var o in opts) {
if (typeof(_chart[o]) === 'function') {
if (opts[o] instanceof Array && applyOptions.indexOf(o) !== -1) {
_chart[o].apply(_chart, opts[o]);
} else {
_chart[o].call(_chart, opts[o]);
}
} else {
dc.logger.debug('Not a valid option setter name: ' + o);
}
}
return _chart;
};
/**
* All dc chart instance supports the following listeners.
* Supports the following events:
* * `renderlet` - This listener function will be invoked after transitions after redraw and render. Replaces the
* deprecated {@link dc.baseMixin#renderlet renderlet} method.
* * `pretransition` - Like `.on('renderlet', ...)` but the event is fired before transitions start.
* * `preRender` - This listener function will be invoked before chart rendering.
* * `postRender` - This listener function will be invoked after chart finish rendering including
* all renderlets' logic.
* * `preRedraw` - This listener function will be invoked before chart redrawing.
* * `postRedraw` - This listener function will be invoked after chart finish redrawing
* including all renderlets' logic.
* * `filtered` - This listener function will be invoked after a filter is applied, added or removed.
* * `zoomed` - This listener function will be invoked after a zoom is triggered.
* @method on
* @memberof dc.baseMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Internals.md#dispatch_on d3.dispatch.on}
* @example
* .on('renderlet', function(chart, filter){...})
* .on('pretransition', function(chart, filter){...})
* .on('preRender', function(chart){...})
* .on('postRender', function(chart){...})
* .on('preRedraw', function(chart){...})
* .on('postRedraw', function(chart){...})
* .on('filtered', function(chart, filter){...})
* .on('zoomed', function(chart, filter){...})
* @param {String} event
* @param {Function} listener
* @returns {dc.baseMixin}
*/
_chart.on = function (event, listener) {
_listeners.on(event, listener);
return _chart;
};
return _chart;
};
/**
* Margin is a mixin that provides margin utility functions for both the Row Chart and Coordinate Grid
* Charts.
* @name marginMixin
* @memberof dc
* @mixin
* @param {Object} _chart
* @returns {dc.marginMixin}
*/
dc.marginMixin = function (_chart) {
var _margin = {top: 10, right: 50, bottom: 30, left: 30};
/**
* Get or set the margins for a particular coordinate grid chart instance. The margins is stored as
* an associative Javascript array.
* @method margins
* @memberof dc.marginMixin
* @instance
* @example
* var leftMargin = chart.margins().left; // 30 by default
* chart.margins().left = 50;
* leftMargin = chart.margins().left; // now 50
* @param {{top: Number, right: Number, left: Number, bottom: Number}} [margins={top: 10, right: 50, bottom: 30, left: 30}]
* @returns {{top: Number, right: Number, left: Number, bottom: Number}|dc.marginMixin}
*/
_chart.margins = function (margins) {
if (!arguments.length) {
return _margin;
}
_margin = margins;
return _chart;
};
_chart.effectiveWidth = function () {
return _chart.width() - _chart.margins().left - _chart.margins().right;
};
_chart.effectiveHeight = function () {
return _chart.height() - _chart.margins().top - _chart.margins().bottom;
};
return _chart;
};
/**
* The Color Mixin is an abstract chart functional class providing universal coloring support
* as a mix-in for any concrete chart implementation.
* @name colorMixin
* @memberof dc
* @mixin
* @param {Object} _chart
* @returns {dc.colorMixin}
*/
dc.colorMixin = function (_chart) {
var _colors = d3.scale.category20c();
var _defaultAccessor = true;
var _colorAccessor = function (d) { return _chart.keyAccessor()(d); };
/**
* Retrieve current color scale or set a new color scale. This methods accepts any function that
* operates like a d3 scale.
* @method colors
* @memberof dc.colorMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Scales.md d3.scale}
* @example
* // alternate categorical scale
* chart.colors(d3.scale.category20b());
* // ordinal scale
* chart.colors(d3.scale.ordinal().range(['red','green','blue']));
* // convenience method, the same as above
* chart.ordinalColors(['red','green','blue']);
* // set a linear scale
* chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);
* @param {d3.scale} [colorScale=d3.scale.category20c()]
* @returns {d3.scale|dc.colorMixin}
*/
_chart.colors = function (colorScale) {
if (!arguments.length) {
return _colors;
}
if (colorScale instanceof Array) {
_colors = d3.scale.quantize().range(colorScale); // deprecated legacy support, note: this fails for ordinal domains
} else {
_colors = d3.functor(colorScale);
}
return _chart;
};
/**
* Convenience method to set the color scale to
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#ordinal d3.scale.ordinal} with
* range `r`.
* @method ordinalColors
* @memberof dc.colorMixin
* @instance
* @param {Array<String>} r
* @returns {dc.colorMixin}
*/
_chart.ordinalColors = function (r) {
return _chart.colors(d3.scale.ordinal().range(r));
};
/**
* Convenience method to set the color scale to an Hcl interpolated linear scale with range `r`.
* @method linearColors
* @memberof dc.colorMixin
* @instance
* @param {Array<Number>} r
* @returns {dc.colorMixin}
*/
_chart.linearColors = function (r) {
return _chart.colors(d3.scale.linear()
.range(r)
.interpolate(d3.interpolateHcl));
};
/**
* Set or the get color accessor function. This function will be used to map a data point in a
* crossfilter group to a color value on the color scale. The default function uses the key
* accessor.
* @method colorAccessor
* @memberof dc.colorMixin
* @instance
* @example
* // default index based color accessor
* .colorAccessor(function (d, i){return i;})
* // color accessor for a multi-value crossfilter reduction
* .colorAccessor(function (d){return d.value.absGain;})
* @param {Function} [colorAccessor]
* @returns {Function|dc.colorMixin}
*/
_chart.colorAccessor = function (colorAccessor) {
if (!arguments.length) {
return _colorAccessor;
}
_colorAccessor = colorAccessor;
_defaultAccessor = false;
return _chart;
};
// what is this?
_chart.defaultColorAccessor = function () {
return _defaultAccessor;
};
/**
* Set or get the current domain for the color mapping function. The domain must be supplied as an
* array.
*
* Note: previously this method accepted a callback function. Instead you may use a custom scale
* set by {@link dc.colorMixin#colors .colors}.
* @method colorDomain
* @memberof dc.colorMixin
* @instance
* @param {Array<String>} [domain]
* @returns {Array<String>|dc.colorMixin}
*/
_chart.colorDomain = function (domain) {
if (!arguments.length) {
return _colors.domain();
}
_colors.domain(domain);
return _chart;
};
/**
* Set the domain by determining the min and max values as retrieved by
* {@link dc.colorMixin#colorAccessor .colorAccessor} over the chart's dataset.
* @method calculateColorDomain
* @memberof dc.colorMixin
* @instance
* @returns {dc.colorMixin}
*/
_chart.calculateColorDomain = function () {
var newDomain = [d3.min(_chart.data(), _chart.colorAccessor()),
d3.max(_chart.data(), _chart.colorAccessor())];
_colors.domain(newDomain);
return _chart;
};
/**
* Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.
* @method getColor
* @memberof dc.colorMixin
* @instance
* @param {*} d
* @param {Number} [i]
* @returns {String}
*/
_chart.getColor = function (d, i) {
return _colors(_colorAccessor.call(this, d, i));
};
/**
* **Deprecated.** Get/set the color calculator. This actually replaces the
* {@link dc.colorMixin#getColor getColor} method!
*
* This is not recommended, since using a {@link dc.colorMixin#colorAccessor colorAccessor} and
* color scale ({@link dc.colorMixin#colors .colors}) is more powerful and idiomatic d3.
* @method colorCalculator
* @memberof dc.colorMixin
* @instance
* @param {*} [colorCalculator]
* @returns {Function|dc.colorMixin}
*/
_chart.colorCalculator = dc.logger.deprecate(function (colorCalculator) {
if (!arguments.length) {
return _chart.getColor;
}
_chart.getColor = colorCalculator;
return _chart;
}, 'colorMixin.colorCalculator has been deprecated. Please colorMixin.colors and colorMixin.colorAccessor instead');
return _chart;
};
/**
* Coordinate Grid is an abstract base chart designed to support a number of coordinate grid based
* concrete chart types, e.g. bar chart, line chart, and bubble chart.
* @name coordinateGridMixin
* @memberof dc
* @mixin
* @mixes dc.colorMixin
* @mixes dc.marginMixin
* @mixes dc.baseMixin
* @param {Object} _chart
* @returns {dc.coordinateGridMixin}
*/
dc.coordinateGridMixin = function (_chart) {
var GRID_LINE_CLASS = 'grid-line';
var HORIZONTAL_CLASS = 'horizontal';
var VERTICAL_CLASS = 'vertical';
var Y_AXIS_LABEL_CLASS = 'y-axis-label';
var X_AXIS_LABEL_CLASS = 'x-axis-label';
var DEFAULT_AXIS_LABEL_PADDING = 12;
_chart = dc.colorMixin(dc.marginMixin(dc.baseMixin(_chart)));
_chart.colors(d3.scale.category10());
_chart._mandatoryAttributes().push('x');
var _parent;
var _g;
var _chartBodyG;
var _x;
var _xOriginalDomain;
var _xAxis = d3.svg.axis().orient('bottom');
var _xUnits = dc.units.integers;
var _xAxisPadding = 0;
var _xAxisPaddingUnit = 'day';
var _xElasticity = false;
var _xAxisLabel;
var _xAxisLabelPadding = 0;
var _lastXDomain;
var _y;
var _yAxis = d3.svg.axis().orient('left');
var _yAxisPadding = 0;
var _yElasticity = false;
var _yAxisLabel;
var _yAxisLabelPadding = 0;
var _brush = d3.svg.brush();
var _brushOn = true;
var _round;
var _renderHorizontalGridLine = false;
var _renderVerticalGridLine = false;
var _refocused = false, _resizing = false;
var _unitCount;
var _zoomScale = [1, Infinity];
var _zoomOutRestrict = true;
var _zoom = d3.behavior.zoom().on('zoom', zoomHandler);
var _nullZoom = d3.behavior.zoom().on('zoom', null);
var _hasBeenMouseZoomable = false;
var _rangeChart;
var _focusChart;
var _mouseZoomable = false;
var _clipPadding = 0;
var _outerRangeBandPadding = 0.5;
var _rangeBandPadding = 0;
var _useRightYAxis = false;
/**
* When changing the domain of the x or y scale, it is necessary to tell the chart to recalculate
* and redraw the axes. (`.rescale()` is called automatically when the x or y scale is replaced
* with {@link dc.coordinateGridMixin+x .x()} or {@link dc.coordinateGridMixin#y .y()}, and has
* no effect on elastic scales.)
* @method rescale
* @memberof dc.coordinateGridMixin
* @instance
* @returns {dc.coordinateGridMixin}
*/
_chart.rescale = function () {
_unitCount = undefined;
_resizing = true;
return _chart;
};
_chart.resizing = function () {
return _resizing;
};
/**
* Get or set the range selection chart associated with this instance. Setting the range selection
* chart using this function will automatically update its selection brush when the current chart
* zooms in. In return the given range chart will also automatically attach this chart as its focus
* chart hence zoom in when range brush updates.
*
* Usually the range and focus charts will share a dimension. The range chart will set the zoom
* boundaries for the focus chart, so its dimension values must be compatible with the domain of
* the focus chart.
*
* See the [Nasdaq 100 Index](http://dc-js.github.com/dc.js/) example for this effect in action.
* @method rangeChart
* @memberof dc.coordinateGridMixin
* @instance
* @param {dc.coordinateGridMixin} [rangeChart]
* @returns {dc.coordinateGridMixin}
*/
_chart.rangeChart = function (rangeChart) {
if (!arguments.length) {
return _rangeChart;
}
_rangeChart = rangeChart;
_rangeChart.focusChart(_chart);
return _chart;
};
/**
* Get or set the scale extent for mouse zooms.
* @method zoomScale
* @memberof dc.coordinateGridMixin
* @instance
* @param {Array<Number|Date>} [extent=[1, Infinity]]
* @returns {Array<Number|Date>|dc.coordinateGridMixin}
*/
_chart.zoomScale = function (extent) {
if (!arguments.length) {
return _zoomScale;
}
_zoomScale = extent;
return _chart;
};
/**
* Get or set the zoom restriction for the chart. If true limits the zoom to origional domain of the chart.
* @method zoomOutRestrict
* @memberof dc.coordinateGridMixin
* @instance
* @param {Boolean} [zoomOutRestrict=true]
* @returns {Boolean|dc.coordinateGridMixin}
*/
_chart.zoomOutRestrict = function (zoomOutRestrict) {
if (!arguments.length) {
return _zoomOutRestrict;
}
_zoomScale[0] = zoomOutRestrict ? 1 : 0;
_zoomOutRestrict = zoomOutRestrict;
return _chart;
};
_chart._generateG = function (parent) {
if (parent === undefined) {
_parent = _chart.svg();
} else {
_parent = parent;
}
var href = window.location.href.split('#')[0];
_g = _parent.append('g');
_chartBodyG = _g.append('g').attr('class', 'chart-body')
.attr('transform', 'translate(' + _chart.margins().left + ', ' + _chart.margins().top + ')')
.attr('clip-path', 'url(' + href + '#' + getClipPathId() + ')');
return _g;
};
/**
* Get or set the root g element. This method is usually used to retrieve the g element in order to
* overlay custom svg drawing programatically. **Caution**: The root g element is usually generated
* by dc.js internals, and resetting it might produce unpredictable result.
* @method g
* @memberof dc.coordinateGridMixin
* @instance
* @param {SVGElement} [gElement]
* @returns {SVGElement|dc.coordinateGridMixin}
*/
_chart.g = function (gElement) {
if (!arguments.length) {
return _g;
}
_g = gElement;
return _chart;
};
/**
* Set or get mouse zoom capability flag (default: false). When turned on the chart will be
* zoomable using the mouse wheel. If the range selector chart is attached zooming will also update
* the range selection brush on the associated range selector chart.
* @method mouseZoomable
* @memberof dc.coordinateGridMixin
* @instance
* @param {Boolean} [mouseZoomable=false]
* @returns {Boolean|dc.coordinateGridMixin}
*/
_chart.mouseZoomable = function (mouseZoomable) {
if (!arguments.length) {
return _mouseZoomable;
}
_mouseZoomable = mouseZoomable;
return _chart;
};
/**
* Retrieve the svg group for the chart body.
* @method chartBodyG
* @memberof dc.coordinateGridMixin
* @instance
* @param {SVGElement} [chartBodyG]
* @returns {SVGElement}
*/
_chart.chartBodyG = function (chartBodyG) {
if (!arguments.length) {
return _chartBodyG;
}
_chartBodyG = chartBodyG;
return _chart;
};
/**
* **mandatory**
*
* Get or set the x scale. The x scale can be any d3
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md quantitive scale} or
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md ordinal scale}.
* @method x
* @memberof dc.coordinateGridMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Scales.md d3.scale}
* @example
* // set x to a linear scale
* chart.x(d3.scale.linear().domain([-2500, 2500]))
* // set x to a time scale to generate histogram
* chart.x(d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)]))
* @param {d3.scale} [xScale]
* @returns {d3.scale|dc.coordinateGridMixin}
*/
_chart.x = function (xScale) {
if (!arguments.length) {
return _x;
}
_x = xScale;
_xOriginalDomain = _x.domain();
_chart.rescale();
return _chart;
};
_chart.xOriginalDomain = function () {
return _xOriginalDomain;
};
/**
* Set or get the xUnits function. The coordinate grid chart uses the xUnits function to calculate
* the number of data projections on x axis such as the number of bars for a bar chart or the
* number of dots for a line chart. This function is expected to return a Javascript array of all
* data points on x axis, or the number of points on the axis. [d3 time range functions
* d3.time.days, d3.time.months, and
* d3.time.years](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Intervals.md#aliases) are all valid xUnits
* function. dc.js also provides a few units function, see the {@link dc.units Units Namespace} for
* a list of built-in units functions.
* @method xUnits
* @memberof dc.coordinateGridMixin
* @instance
* @todo Add docs for utilities
* @example
* // set x units to count days
* chart.xUnits(d3.time.days);
* // set x units to count months
* chart.xUnits(d3.time.months);
*
* // A custom xUnits function can be used as long as it follows the following interface:
* // units in integer
* function(start, end, xDomain) {
* // simply calculates how many integers in the domain
* return Math.abs(end - start);
* };
*
* // fixed units
* function(start, end, xDomain) {
* // be aware using fixed units will disable the focus/zoom ability on the chart
* return 1000;
* @param {Function} [xUnits=dc.units.integers]
* @returns {Function|dc.coordinateGridMixin}
*/
_chart.xUnits = function (xUnits) {
if (!arguments.length) {
return _xUnits;
}
_xUnits = xUnits;
return _chart;
};
/**
* Set or get the x axis used by a particular coordinate grid chart instance. This function is most
* useful when x axis customization is required. The x axis in dc.js is an instance of a
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#axis d3 axis object};
* therefore it supports any valid d3 axis manipulation.
*
* **Caution**: The x axis is usually generated internally by dc; resetting it may cause
* unexpected results. Note also that when used as a getter, this function is not chainable:
* it returns the axis, not the chart,
* {@link https://github.com/dc-js/dc.js/wiki/FAQ#why-does-everything-break-after-a-call-to-xaxis-or-yaxis
* so attempting to call chart functions after calling `.xAxis()` will fail}.
* @method xAxis
* @memberof dc.coordinateGridMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#axis d3.svg.axis}
* @example
* // customize x axis tick format
* chart.xAxis().tickFormat(function(v) {return v + '%';});
* // customize x axis tick values
* chart.xAxis().tickValues([0, 100, 200, 300]);
* @param {d3.svg.axis} [xAxis=d3.svg.axis().orient('bottom')]
* @returns {d3.svg.axis|dc.coordinateGridMixin}
*/
_chart.xAxis = function (xAxis) {
if (!arguments.length) {
return _xAxis;
}
_xAxis = xAxis;
return _chart;
};
/**
* Turn on/off elastic x axis behavior. If x axis elasticity is turned on, then the grid chart will
* attempt to recalculate the x axis range whenever a redraw event is triggered.
* @method elasticX
* @memberof dc.coordinateGridMixin
* @instance
* @param {Boolean} [elasticX=false]
* @returns {Boolean|dc.coordinateGridMixin}
*/
_chart.elasticX = function (elasticX) {
if (!arguments.length) {
return _xElasticity;
}
_xElasticity = elasticX;
return _chart;
};
/**
* Set or get x axis padding for the elastic x axis. The padding will be added to both end of the x
* axis if elasticX is turned on; otherwise it is ignored.
*
* Padding can be an integer or percentage in string (e.g. '10%'). Padding can be applied to
* number or date x axes. When padding a date axis, an integer represents number of units being padded
* and a percentage string will be treated the same as an integer. The unit will be determined by the
* xAxisPaddingUnit variable.
* @method xAxisPadding
* @memberof dc.coordinateGridMixin
* @instance
* @param {Number|String} [padding=0]
* @returns {Number|String|dc.coordinateGridMixin}
*/
_chart.xAxisPadding = function (padding) {
if (!arguments.length) {
return _xAxisPadding;
}
_xAxisPadding = padding;
return _chart;
};
/**
* Set or get x axis padding unit for the elastic x axis. The padding unit will determine which unit to
* use when applying xAxis padding if elasticX is turned on and if x-axis uses a time dimension;
* otherwise it is ignored.
*
* Padding unit is a string that will be used when the padding is calculated. Available parameters are
* the available d3 time intervals; see
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Intervals.md#interval d3.time.interval}.
* @method xAxisPaddingUnit
* @memberof dc.coordinateGridMixin
* @instance
* @param {String} [unit='days']
* @returns {String|dc.coordinateGridMixin}
*/
_chart.xAxisPaddingUnit = function (unit) {
if (!arguments.length) {
return _xAxisPaddingUnit;
}
_xAxisPaddingUnit = unit;
return _chart;
};
/**
* Returns the number of units displayed on the x axis using the unit measure configured by
* {@link dc.coordinateGridMixin#xUnits xUnits}.
* @method xUnitCount
* @memberof dc.coordinateGridMixin
* @instance
* @returns {Number}
*/
_chart.xUnitCount = function () {
if (_unitCount === undefined) {
var units = _chart.xUnits()(_chart.x().domain()[0], _chart.x().domain()[1], _chart.x().domain());
if (units instanceof Array) {
_unitCount = units.length;
} else {
_unitCount = units;
}
}
return _unitCount;
};
/**
* Gets or sets whether the chart should be drawn with a right axis instead of a left axis. When
* used with a chart in a composite chart, allows both left and right Y axes to be shown on a
* chart.
* @method useRightYAxis
* @memberof dc.coordinateGridMixin
* @instance
* @param {Boolean} [useRightYAxis=false]
* @returns {Boolean|dc.coordinateGridMixin}
*/
_chart.useRightYAxis = function (useRightYAxis) {
if (!arguments.length) {
return _useRightYAxis;
}
_useRightYAxis = useRightYAxis;
return _chart;
};
/**
* Returns true if the chart is using ordinal xUnits ({@link dc.units.ordinal dc.units.ordinal}, or false
* otherwise. Most charts behave differently with ordinal data and use the result of this method to
* trigger the appropriate logic.
* @method isOrdinal
* @memberof dc.coordinateGridMixin
* @instance
* @returns {Boolean}
*/
_chart.isOrdinal = function () {
return _chart.xUnits() === dc.units.ordinal;
};
_chart._useOuterPadding = function () {
return true;
};
_chart._ordinalXDomain = function () {
var groups = _chart._computeOrderedGroups(_chart.data());
return groups.map(_chart.keyAccessor());
};
function compareDomains (d1, d2) {
return !d1 || !d2 || d1.length !== d2.length ||
d1.some(function (elem, i) { return (elem && d2[i]) ? elem.toString() !== d2[i].toString() : elem === d2[i]; });
}
function prepareXAxis (g, render) {
if (!_chart.isOrdinal()) {
if (_chart.elasticX()) {
_x.domain([_chart.xAxisMin(), _chart.xAxisMax()]);
}
} else { // _chart.isOrdinal()
if (_chart.elasticX() || _x.domain().length === 0) {
_x.domain(_chart._ordinalXDomain());
}
}
// has the domain changed?
var xdom = _x.domain();
if (render || compareDomains(_lastXDomain, xdom)) {
_chart.rescale();
}
_lastXDomain = xdom;
// please can't we always use rangeBands for bar charts?
if (_chart.isOrdinal()) {
_x.rangeBands([0, _chart.xAxisLength()], _rangeBandPadding,
_chart._useOuterPadding() ? _outerRangeBandPadding : 0);
} else {
_x.range([0, _chart.xAxisLength()]);
}
_xAxis = _xAxis.scale(_chart.x());
renderVerticalGridLines(g);
}
_chart.renderXAxis = function (g) {
var axisXG = g.select('g.x');
if (axisXG.empty()) {
axisXG = g.append('g')
.attr('class', 'axis x')
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart._xAxisY() + ')');
}
var axisXLab = g.select('text.' + X_AXIS_LABEL_CLASS);
if (axisXLab.empty() && _chart.xAxisLabel()) {
axisXLab = g.append('text')
.attr('class', X_AXIS_LABEL_CLASS)
.attr('transform', 'translate(' + (_chart.margins().left + _chart.xAxisLength() / 2) + ',' +
(_chart.height() - _xAxisLabelPadding) + ')')
.attr('text-anchor', 'middle');
}
if (_chart.xAxisLabel() && axisXLab.text() !== _chart.xAxisLabel()) {
axisXLab.text(_chart.xAxisLabel());
}
dc.transition(axisXG, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart._xAxisY() + ')')
.call(_xAxis);
dc.transition(axisXLab, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', 'translate(' + (_chart.margins().left + _chart.xAxisLength() / 2) + ',' +
(_chart.height() - _xAxisLabelPadding) + ')');
};
function renderVerticalGridLines (g) {
var gridLineG = g.select('g.' + VERTICAL_CLASS);
if (_renderVerticalGridLine) {
if (gridLineG.empty()) {
gridLineG = g.insert('g', ':first-child')
.attr('class', GRID_LINE_CLASS + ' ' + VERTICAL_CLASS)
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
}
var ticks = _xAxis.tickValues() ? _xAxis.tickValues() :
(typeof _x.ticks === 'function' ? _x.ticks(_xAxis.ticks()[0]) : _x.domain());
var lines = gridLineG.selectAll('line')
.data(ticks);
// enter
var linesGEnter = lines.enter()
.append('line')
.attr('x1', function (d) {
return _x(d);
})
.attr('y1', _chart._xAxisY() - _chart.margins().top)
.attr('x2', function (d) {
return _x(d);
})
.attr('y2', 0)
.attr('opacity', 0);
dc.transition(linesGEnter, _chart.transitionDuration(), _chart.transitionDelay())
.attr('opacity', 1);
// update
dc.transition(lines, _chart.transitionDuration(), _chart.transitionDelay())
.attr('x1', function (d) {
return _x(d);
})
.attr('y1', _chart._xAxisY() - _chart.margins().top)
.attr('x2', function (d) {
return _x(d);
})
.attr('y2', 0);
// exit
lines.exit().remove();
} else {
gridLineG.selectAll('line').remove();
}
}
_chart._xAxisY = function () {
return (_chart.height() - _chart.margins().bottom);
};
_chart.xAxisLength = function () {
return _chart.effectiveWidth();
};
/**
* Set or get the x axis label. If setting the label, you may optionally include additional padding to
* the margin to make room for the label. By default the padded is set to 12 to accomodate the text height.
* @method xAxisLabel
* @memberof dc.coordinateGridMixin
* @instance
* @param {String} [labelText]
* @param {Number} [padding=12]
* @returns {String}
*/
_chart.xAxisLabel = function (labelText, padding) {
if (!arguments.length) {
return _xAxisLabel;
}
_xAxisLabel = labelText;
_chart.margins().bottom -= _xAxisLabelPadding;
_xAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding;
_chart.margins().bottom += _xAxisLabelPadding;
return _chart;
};
_chart._prepareYAxis = function (g) {
if (_y === undefined || _chart.elasticY()) {
if (_y === undefined) {
_y = d3.scale.linear();
}
var min = _chart.yAxisMin() || 0,
max = _chart.yAxisMax() || 0;
_y.domain([min, max]).rangeRound([_chart.yAxisHeight(), 0]);
}
_y.range([_chart.yAxisHeight(), 0]);
_yAxis = _yAxis.scale(_y);
if (_useRightYAxis) {
_yAxis.orient('right');
}
_chart._renderHorizontalGridLinesForAxis(g, _y, _yAxis);
};
_chart.renderYAxisLabel = function (axisClass, text, rotation, labelXPosition) {
labelXPosition = labelXPosition || _yAxisLabelPadding;
var axisYLab = _chart.g().select('text.' + Y_AXIS_LABEL_CLASS + '.' + axisClass + '-label');
var labelYPosition = (_chart.margins().top + _chart.yAxisHeight() / 2);
if (axisYLab.empty() && text) {
axisYLab = _chart.g().append('text')
.attr('transform', 'translate(' + labelXPosition + ',' + labelYPosition + '),rotate(' + rotation + ')')
.attr('class', Y_AXIS_LABEL_CLASS + ' ' + axisClass + '-label')
.attr('text-anchor', 'middle')
.text(text);
}
if (text && axisYLab.text() !== text) {
axisYLab.text(text);
}
dc.transition(axisYLab, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', 'translate(' + labelXPosition + ',' + labelYPosition + '),rotate(' + rotation + ')');
};
_chart.renderYAxisAt = function (axisClass, axis, position) {
var axisYG = _chart.g().select('g.' + axisClass);
if (axisYG.empty()) {
axisYG = _chart.g().append('g')
.attr('class', 'axis ' + axisClass)
.attr('transform', 'translate(' + position + ',' + _chart.margins().top + ')');
}
dc.transition(axisYG, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', 'translate(' + position + ',' + _chart.margins().top + ')')
.call(axis);
};
_chart.renderYAxis = function () {
var axisPosition = _useRightYAxis ? (_chart.width() - _chart.margins().right) : _chart._yAxisX();
_chart.renderYAxisAt('y', _yAxis, axisPosition);
var labelPosition = _useRightYAxis ? (_chart.width() - _yAxisLabelPadding) : _yAxisLabelPadding;
var rotation = _useRightYAxis ? 90 : -90;
_chart.renderYAxisLabel('y', _chart.yAxisLabel(), rotation, labelPosition);
};
_chart._renderHorizontalGridLinesForAxis = function (g, scale, axis) {
var gridLineG = g.select('g.' + HORIZONTAL_CLASS);
if (_renderHorizontalGridLine) {
var ticks = axis.tickValues() ? axis.tickValues() : scale.ticks(axis.ticks()[0]);
if (gridLineG.empty()) {
gridLineG = g.insert('g', ':first-child')
.attr('class', GRID_LINE_CLASS + ' ' + HORIZONTAL_CLASS)
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
}
var lines = gridLineG.selectAll('line')
.data(ticks);
// enter
var linesGEnter = lines.enter()
.append('line')
.attr('x1', 1)
.attr('y1', function (d) {
return scale(d);
})
.attr('x2', _chart.xAxisLength())
.attr('y2', function (d) {
return scale(d);
})
.attr('opacity', 0);
dc.transition(linesGEnter, _chart.transitionDuration(), _chart.transitionDelay())
.attr('opacity', 1);
// update
dc.transition(lines, _chart.transitionDuration(), _chart.transitionDelay())
.attr('x1', 1)
.attr('y1', function (d) {
return scale(d);
})
.attr('x2', _chart.xAxisLength())
.attr('y2', function (d) {
return scale(d);
});
// exit
lines.exit().remove();
} else {
gridLineG.selectAll('line').remove();
}
};
_chart._yAxisX = function () {
return _chart.useRightYAxis() ? _chart.width() - _chart.margins().right : _chart.margins().left;
};
/**
* Set or get the y axis label. If setting the label, you may optionally include additional padding
* to the margin to make room for the label. By default the padding is set to 12 to accommodate the
* text height.
* @method yAxisLabel
* @memberof dc.coordinateGridMixin
* @instance
* @param {String} [labelText]
* @param {Number} [padding=12]
* @returns {String|dc.coordinateGridMixin}
*/
_chart.yAxisLabel = function (labelText, padding) {
if (!arguments.length) {
return _yAxisLabel;
}
_yAxisLabel = labelText;
_chart.margins().left -= _yAxisLabelPadding;
_yAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding;
_chart.margins().left += _yAxisLabelPadding;
return _chart;
};
/**
* Get or set the y scale. The y scale is typically automatically determined by the chart implementation.
* @method y
* @memberof dc.coordinateGridMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Scales.md d3.scale}
* @param {d3.scale} [yScale]
* @returns {d3.scale|dc.coordinateGridMixin}
*/
_chart.y = function (yScale) {
if (!arguments.length) {
return _y;
}
_y = yScale;
_chart.rescale();
return _chart;
};
/**
* Set or get the y axis used by the coordinate grid chart instance. This function is most useful
* when y axis customization is required. The y axis in dc.js is simply an instance of a [d3 axis
* object](https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#axis); therefore it supports any
* valid d3 axis manipulation.
*
* **Caution**: The y axis is usually generated internally by dc; resetting it may cause
* unexpected results. Note also that when used as a getter, this function is not chainable: it
* returns the axis, not the chart,
* {@link https://github.com/dc-js/dc.js/wiki/FAQ#why-does-everything-break-after-a-call-to-xaxis-or-yaxis
* so attempting to call chart functions after calling `.yAxis()` will fail}.
* @method yAxis
* @memberof dc.coordinateGridMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#axis d3.svg.axis}
* @example
* // customize y axis tick format
* chart.yAxis().tickFormat(function(v) {return v + '%';});
* // customize y axis tick values
* chart.yAxis().tickValues([0, 100, 200, 300]);
* @param {d3.svg.axis} [yAxis=d3.svg.axis().orient('left')]
* @returns {d3.svg.axis|dc.coordinateGridMixin}
*/
_chart.yAxis = function (yAxis) {
if (!arguments.length) {
return _yAxis;
}
_yAxis = yAxis;
return _chart;
};
/**
* Turn on/off elastic y axis behavior. If y axis elasticity is turned on, then the grid chart will
* attempt to recalculate the y axis range whenever a redraw event is triggered.
* @method elasticY
* @memberof dc.coordinateGridMixin
* @instance
* @param {Boolean} [elasticY=false]
* @returns {Boolean|dc.coordinateGridMixin}
*/
_chart.elasticY = function (elasticY) {
if (!arguments.length) {
return _yElasticity;
}
_yElasticity = elasticY;
return _chart;
};
/**
* Turn on/off horizontal grid lines.
* @method renderHorizontalGridLines
* @memberof dc.coordinateGridMixin
* @instance
* @param {Boolean} [renderHorizontalGridLines=false]
* @returns {Boolean|dc.coordinateGridMixin}
*/
_chart.renderHorizontalGridLines = function (renderHorizontalGridLines) {
if (!arguments.length) {
return _renderHorizontalGridLine;
}
_renderHorizontalGridLine = renderHorizontalGridLines;
return _chart;
};
/**
* Turn on/off vertical grid lines.
* @method renderVerticalGridLines
* @memberof dc.coordinateGridMixin
* @instance
* @param {Boolean} [renderVerticalGridLines=false]
* @returns {Boolean|dc.coordinateGridMixin}
*/
_chart.renderVerticalGridLines = function (renderVerticalGridLines) {
if (!arguments.length) {
return _renderVerticalGridLine;
}
_renderVerticalGridLine = renderVerticalGridLines;
return _chart;
};
/**
* Calculates the minimum x value to display in the chart. Includes xAxisPadding if set.
* @method xAxisMin
* @memberof dc.coordinateGridMixin
* @instance
* @returns {*}
*/
_chart.xAxisMin = function () {
var min = d3.min(_chart.data(), function (e) {
return _chart.keyAccessor()(e);
});
return dc.utils.subtract(min, _xAxisPadding, _xAxisPaddingUnit);
};
/**
* Calculates the maximum x value to display in the chart. Includes xAxisPadding if set.
* @method xAxisMax
* @memberof dc.coordinateGridMixin
* @instance
* @returns {*}
*/
_chart.xAxisMax = function () {
var max = d3.max(_chart.data(), function (e) {
return _chart.keyAccessor()(e);
});
return dc.utils.add(max, _xAxisPadding, _xAxisPaddingUnit);
};
/**
* Calculates the minimum y value to display in the chart. Includes yAxisPadding if set.
* @method yAxisMin
* @memberof dc.coordinateGridMixin
* @instance
* @returns {*}
*/
_chart.yAxisMin = function () {
var min = d3.min(_chart.data(), function (e) {
return _chart.valueAccessor()(e);
});
return dc.utils.subtract(min, _yAxisPadding);
};
/**
* Calculates the maximum y value to display in the chart. Includes yAxisPadding if set.
* @method yAxisMax
* @memberof dc.coordinateGridMixin
* @instance
* @returns {*}
*/
_chart.yAxisMax = function () {
var max = d3.max(_chart.data(), function (e) {
return _chart.valueAccessor()(e);
});
return dc.utils.add(max, _yAxisPadding);
};
/**
* Set or get y axis padding for the elastic y axis. The padding will be added to the top and
* bottom of the y axis if elasticY is turned on; otherwise it is ignored.
*
* Padding can be an integer or percentage in string (e.g. '10%'). Padding can be applied to
* number or date axes. When padding a date axis, an integer represents number of days being padded
* and a percentage string will be treated the same as an integer.
* @method yAxisPadding
* @memberof dc.coordinateGridMixin
* @instance
* @param {Number|String} [padding=0]
* @returns {Number|dc.coordinateGridMixin}
*/
_chart.yAxisPadding = function (padding) {
if (!arguments.length) {
return _yAxisPadding;
}
_yAxisPadding = padding;
return _chart;
};
_chart.yAxisHeight = function () {
return _chart.effectiveHeight();
};
/**
* Set or get the rounding function used to quantize the selection when brushing is enabled.
* @method round
* @memberof dc.coordinateGridMixin
* @instance
* @example
* // set x unit round to by month, this will make sure range selection brush will
* // select whole months
* chart.round(d3.time.month.round);
* @param {Function} [round]
* @returns {Function|dc.coordinateGridMixin}
*/
_chart.round = function (round) {
if (!arguments.length) {
return _round;
}
_round = round;
return _chart;
};
_chart._rangeBandPadding = function (_) {
if (!arguments.length) {
return _rangeBandPadding;
}
_rangeBandPadding = _;
return _chart;
};
_chart._outerRangeBandPadding = function (_) {
if (!arguments.length) {
return _outerRangeBandPadding;
}
_outerRangeBandPadding = _;
return _chart;
};
dc.override(_chart, 'filter', function (_) {
if (!arguments.length) {
return _chart._filter();
}
_chart._filter(_);
if (_) {
_chart.brush().extent(_);
} else {
_chart.brush().clear();
}
return _chart;
});
_chart.brush = function (_) {
if (!arguments.length) {
return _brush;
}
_brush = _;
return _chart;
};
function brushHeight () {
return _chart._xAxisY() - _chart.margins().top;
}
_chart.renderBrush = function (g) {
if (_brushOn) {
_brush.on('brush', _chart._brushing);
_brush.on('brushstart', _chart._disableMouseZoom);
_brush.on('brushend', configureMouseZoom);
var gBrush = g.append('g')
.attr('class', 'brush')
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')')
.call(_brush.x(_chart.x()));
_chart.setBrushY(gBrush, false);
_chart.setHandlePaths(gBrush);
if (_chart.hasFilter()) {
_chart.redrawBrush(g, false);
}
}
};
_chart.setHandlePaths = function (gBrush) {
gBrush.selectAll('.resize').append('path').attr('d', _chart.resizeHandlePath);
};
_chart.setBrushY = function (gBrush) {
gBrush.selectAll('rect')
.attr('height', brushHeight());
gBrush.selectAll('.resize path')
.attr('d', _chart.resizeHandlePath);
};
_chart.extendBrush = function () {
var extent = _brush.extent();
if (_chart.round()) {
extent[0] = extent.map(_chart.round())[0];
extent[1] = extent.map(_chart.round())[1];
_g.select('.brush')
.call(_brush.extent(extent));
}
return extent;
};
_chart.brushIsEmpty = function (extent) {
return _brush.empty() || !extent || extent[1] <= extent[0];
};
_chart._brushing = function () {
var extent = _chart.extendBrush();
_chart.redrawBrush(_g, false);
if (_chart.brushIsEmpty(extent)) {
dc.events.trigger(function () {
_chart.filter(null);
_chart.redrawGroup();
}, dc.constants.EVENT_DELAY);
} else {
var rangedFilter = dc.filters.RangedFilter(extent[0], extent[1]);
dc.events.trigger(function () {
_chart.replaceFilter(rangedFilter);
_chart.redrawGroup();
}, dc.constants.EVENT_DELAY);
}
};
_chart.redrawBrush = function (g, doTransition) {
if (_brushOn) {
if (_chart.filter() && _chart.brush().empty()) {
_chart.brush().extent(_chart.filter());
}
var gBrush = dc.optionalTransition(doTransition, _chart.transitionDuration(), _chart.transitionDelay())(g.select('g.brush'));
_chart.setBrushY(gBrush);
gBrush.call(_chart.brush()
.x(_chart.x())
.extent(_chart.brush().extent()));
}
_chart.fadeDeselectedArea();
};
_chart.fadeDeselectedArea = function () {
// do nothing, sub-chart should override this function
};
// borrowed from Crossfilter example
_chart.resizeHandlePath = function (d) {
var e = +(d === 'e'), x = e ? 1 : -1, y = brushHeight() / 3;
return 'M' + (0.5 * x) + ',' + y +
'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6) +
'V' + (2 * y - 6) +
'A6,6 0 0 ' + e + ' ' + (0.5 * x) + ',' + (2 * y) +
'Z' +
'M' + (2.5 * x) + ',' + (y + 8) +
'V' + (2 * y - 8) +
'M' + (4.5 * x) + ',' + (y + 8) +
'V' + (2 * y - 8);
};
function getClipPathId () {
return _chart.anchorName().replace(/[ .#=\[\]"]/g, '-') + '-clip';
}
/**
* Get or set the padding in pixels for the clip path. Once set padding will be applied evenly to
* the top, left, right, and bottom when the clip path is generated. If set to zero, the clip area
* will be exactly the chart body area minus the margins.
* @method clipPadding
* @memberof dc.coordinateGridMixin
* @instance
* @param {Number} [padding=5]
* @returns {Number|dc.coordinateGridMixin}
*/
_chart.clipPadding = function (padding) {
if (!arguments.length) {
return _clipPadding;
}
_clipPadding = padding;
return _chart;
};
function generateClipPath () {
var defs = dc.utils.appendOrSelect(_parent, 'defs');
// cannot select <clippath> elements; bug in WebKit, must select by id
// https://groups.google.com/forum/#!topic/d3-js/6EpAzQ2gU9I
var id = getClipPathId();
var chartBodyClip = dc.utils.appendOrSelect(defs, '#' + id, 'clipPath').attr('id', id);
var padding = _clipPadding * 2;
dc.utils.appendOrSelect(chartBodyClip, 'rect')
.attr('width', _chart.xAxisLength() + padding)
.attr('height', _chart.yAxisHeight() + padding)
.attr('transform', 'translate(-' + _clipPadding + ', -' + _clipPadding + ')');
}
_chart._preprocessData = function () {};
_chart._doRender = function () {
_chart.resetSvg();
_chart._preprocessData();
_chart._generateG();
generateClipPath();
drawChart(true);
configureMouseZoom();
return _chart;
};
_chart._doRedraw = function () {
_chart._preprocessData();
drawChart(false);
generateClipPath();
return _chart;
};
function drawChart (render) {
if (_chart.isOrdinal()) {
_brushOn = false;
}
prepareXAxis(_chart.g(), render);
_chart._prepareYAxis(_chart.g());
_chart.plotData();
if (_chart.elasticX() || _resizing || render) {
_chart.renderXAxis(_chart.g());
}
if (_chart.elasticY() || _resizing || render) {
_chart.renderYAxis(_chart.g());
}
if (render) {
_chart.renderBrush(_chart.g(), false);
} else {
_chart.redrawBrush(_chart.g(), _resizing);
}
_chart.fadeDeselectedArea();
_resizing = false;
}
function configureMouseZoom () {
if (_mouseZoomable) {
_chart._enableMouseZoom();
} else if (_hasBeenMouseZoomable) {
_chart._disableMouseZoom();
}
}
_chart._enableMouseZoom = function () {
_hasBeenMouseZoomable = true;
_zoom.x(_chart.x())
.scaleExtent(_zoomScale)
.size([_chart.width(), _chart.height()])
.duration(_chart.transitionDuration());
_chart.root().call(_zoom);
};
_chart._disableMouseZoom = function () {
_chart.root().call(_nullZoom);
};
function zoomHandler () {
_refocused = true;
if (_zoomOutRestrict) {
var constraint = _xOriginalDomain;
if (_rangeChart) {
constraint = intersectExtents(constraint, _rangeChart.x().domain());
}
var constrained = constrainExtent(_chart.x().domain(), constraint);
if (constrained) {
_chart.x().domain(constrained);
}
}
var domain = _chart.x().domain();
var domFilter = dc.filters.RangedFilter(domain[0], domain[1]);
_chart.replaceFilter(domFilter);
_chart.rescale();
_chart.redraw();
if (_rangeChart && !rangesEqual(_chart.filter(), _rangeChart.filter())) {
dc.events.trigger(function () {
_rangeChart.replaceFilter(domFilter);
_rangeChart.redraw();
});
}
_chart._invokeZoomedListener();
dc.events.trigger(function () {
_chart.redrawGroup();
}, dc.constants.EVENT_DELAY);
_refocused = !rangesEqual(domain, _xOriginalDomain);
}
function intersectExtents (ext1, ext2) {
if (ext1[0] > ext2[1] || ext1[1] < ext2[0]) {
console.warn('could not intersect extents');
}
return [Math.max(ext1[0], ext2[0]), Math.min(ext1[1], ext2[1])];
}
function constrainExtent (extent, constraint) {
var size = extent[1] - extent[0];
if (extent[0] < constraint[0]) {
return [constraint[0], Math.min(constraint[1], dc.utils.add(constraint[0], size, 'millis'))];
} else if (extent[1] > constraint[1]) {
return [Math.max(constraint[0], dc.utils.subtract(constraint[1], size, 'millis')), constraint[1]];
} else {
return null;
}
}
/**
* Zoom this chart to focus on the given range. The given range should be an array containing only
* 2 elements (`[start, end]`) defining a range in the x domain. If the range is not given or set
* to null, then the zoom will be reset. _For focus to work elasticX has to be turned off;
* otherwise focus will be ignored.
* @method focus
* @memberof dc.coordinateGridMixin
* @instance
* @example
* chart.on('renderlet', function(chart) {
* // smooth the rendering through event throttling
* dc.events.trigger(function(){
* // focus some other chart to the range selected by user on this chart
* someOtherChart.focus(chart.filter());
* });
* })
* @param {Array<Number>} [range]
*/
_chart.focus = function (range) {
if (hasRangeSelected(range)) {
_chart.x().domain(range);
} else {
_chart.x().domain(_xOriginalDomain);
}
_zoom.x(_chart.x());
zoomHandler();
};
_chart.refocused = function () {
return _refocused;
};
_chart.focusChart = function (c) {
if (!arguments.length) {
return _focusChart;
}
_focusChart = c;
_chart.on('filtered', function (chart) {
if (!chart.filter()) {
dc.events.trigger(function () {
_focusChart.x().domain(_focusChart.xOriginalDomain());
});
} else if (!rangesEqual(chart.filter(), _focusChart.filter())) {
dc.events.trigger(function () {
_focusChart.focus(chart.filter());
});
}
});
return _chart;
};
function rangesEqual (range1, range2) {
if (!range1 && !range2) {
return true;
} else if (!range1 || !range2) {
return false;
} else if (range1.length === 0 && range2.length === 0) {
return true;
} else if (range1[0].valueOf() === range2[0].valueOf() &&
range1[1].valueOf() === range2[1].valueOf()) {
return true;
}
return false;
}
/**
* Turn on/off the brush-based range filter. When brushing is on then user can drag the mouse
* across a chart with a quantitative scale to perform range filtering based on the extent of the
* brush, or click on the bars of an ordinal bar chart or slices of a pie chart to filter and
* un-filter them. However turning on the brush filter will disable other interactive elements on
* the chart such as highlighting, tool tips, and reference lines. Zooming will still be possible
* if enabled, but only via scrolling (panning will be disabled.)
* @method brushOn
* @memberof dc.coordinateGridMixin
* @instance
* @param {Boolean} [brushOn=true]
* @returns {Boolean|dc.coordinateGridMixin}
*/
_chart.brushOn = function (brushOn) {
if (!arguments.length) {
return _brushOn;
}
_brushOn = brushOn;
return _chart;
};
function hasRangeSelected (range) {
return range instanceof Array && range.length > 1;
}
return _chart;
};
/**
* Stack Mixin is an mixin that provides cross-chart support of stackability using d3.layout.stack.
* @name stackMixin
* @memberof dc
* @mixin
* @param {Object} _chart
* @returns {dc.stackMixin}
*/
dc.stackMixin = function (_chart) {
function prepareValues (layer, layerIdx) {
var valAccessor = layer.accessor || _chart.valueAccessor();
layer.name = String(layer.name || layerIdx);
layer.values = layer.group.all().map(function (d, i) {
return {
x: _chart.keyAccessor()(d, i),
y: layer.hidden ? null : valAccessor(d, i),
data: d,
layer: layer.name,
hidden: layer.hidden
};
});
layer.values = layer.values.filter(domainFilter());
return layer.values;
}
var _stackLayout = d3.layout.stack()
.values(prepareValues);
var _stack = [];
var _titles = {};
var _hidableStacks = false;
var _evadeDomainFilter = false;
function domainFilter () {
if (!_chart.x() || _evadeDomainFilter) {
return d3.functor(true);
}
var xDomain = _chart.x().domain();
if (_chart.isOrdinal()) {
// TODO #416
//var domainSet = d3.set(xDomain);
return function () {
return true; //domainSet.has(p.x);
};
}
if (_chart.elasticX()) {
return function () { return true; };
}
return function (p) {
//return true;
return p.x >= xDomain[0] && p.x <= xDomain[xDomain.length - 1];
};
}
/**
* Stack a new crossfilter group onto this chart with an optional custom value accessor. All stacks
* in the same chart will share the same key accessor and therefore the same set of keys.
*
* For example, in a stacked bar chart, the bars of each stack will be positioned using the same set
* of keys on the x axis, while stacked vertically. If name is specified then it will be used to
* generate the legend label.
* @method stack
* @memberof dc.stackMixin
* @instance
* @see {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#group-map-reduce crossfilter.group}
* @example
* // stack group using default accessor
* chart.stack(valueSumGroup)
* // stack group using custom accessor
* .stack(avgByDayGroup, function(d){return d.value.avgByDay;});
* @param {crossfilter.group} group
* @param {String} [name]
* @param {Function} [accessor]
* @returns {Array<{group: crossfilter.group, name: String, accessor: Function}>|dc.stackMixin}
*/
_chart.stack = function (group, name, accessor) {
if (!arguments.length) {
return _stack;
}
if (arguments.length <= 2) {
accessor = name;
}
var layer = {group: group};
if (typeof name === 'string') {
layer.name = name;
}
if (typeof accessor === 'function') {
layer.accessor = accessor;
}
_stack.push(layer);
return _chart;
};
dc.override(_chart, 'group', function (g, n, f) {
if (!arguments.length) {
return _chart._group();
}
_stack = [];
_titles = {};
_chart.stack(g, n);
if (f) {
_chart.valueAccessor(f);
}
return _chart._group(g, n);
});
/**
* Allow named stacks to be hidden or shown by clicking on legend items.
* This does not affect the behavior of hideStack or showStack.
* @method hidableStacks
* @memberof dc.stackMixin
* @instance
* @param {Boolean} [hidableStacks=false]
* @returns {Boolean|dc.stackMixin}
*/
_chart.hidableStacks = function (hidableStacks) {
if (!arguments.length) {
return _hidableStacks;
}
_hidableStacks = hidableStacks;
return _chart;
};
function findLayerByName (n) {
var i = _stack.map(dc.pluck('name')).indexOf(n);
return _stack[i];
}
/**
* Hide all stacks on the chart with the given name.
* The chart must be re-rendered for this change to appear.
* @method hideStack
* @memberof dc.stackMixin
* @instance
* @param {String} stackName
* @returns {dc.stackMixin}
*/
_chart.hideStack = function (stackName) {
var layer = findLayerByName(stackName);
if (layer) {
layer.hidden = true;
}
return _chart;
};
/**
* Show all stacks on the chart with the given name.
* The chart must be re-rendered for this change to appear.
* @method showStack
* @memberof dc.stackMixin
* @instance
* @param {String} stackName
* @returns {dc.stackMixin}
*/
_chart.showStack = function (stackName) {
var layer = findLayerByName(stackName);
if (layer) {
layer.hidden = false;
}
return _chart;
};
_chart.getValueAccessorByIndex = function (index) {
return _stack[index].accessor || _chart.valueAccessor();
};
_chart.yAxisMin = function () {
var min = d3.min(flattenStack(), function (p) {
return (p.y < 0) ? (p.y + p.y0) : p.y0;
});
return dc.utils.subtract(min, _chart.yAxisPadding());
};
_chart.yAxisMax = function () {
var max = d3.max(flattenStack(), function (p) {
return (p.y > 0) ? (p.y + p.y0) : p.y0;
});
return dc.utils.add(max, _chart.yAxisPadding());
};
function flattenStack () {
var valueses = _chart.data().map(function (layer) { return layer.values; });
return Array.prototype.concat.apply([], valueses);
}
_chart.xAxisMin = function () {
var min = d3.min(flattenStack(), dc.pluck('x'));
return dc.utils.subtract(min, _chart.xAxisPadding(), _chart.xAxisPaddingUnit());
};
_chart.xAxisMax = function () {
var max = d3.max(flattenStack(), dc.pluck('x'));
return dc.utils.add(max, _chart.xAxisPadding(), _chart.xAxisPaddingUnit());
};
/**
* Set or get the title function. Chart class will use this function to render svg title (usually interpreted by
* browser as tooltips) for each child element in the chart, i.e. a slice in a pie chart or a bubble in a bubble chart.
* Almost every chart supports title function however in grid coordinate chart you need to turn off brush in order to
* use title otherwise the brush layer will block tooltip trigger.
*
* If the first argument is a stack name, the title function will get or set the title for that stack. If stackName
* is not provided, the first stack is implied.
* @method title
* @memberof dc.stackMixin
* @instance
* @example
* // set a title function on 'first stack'
* chart.title('first stack', function(d) { return d.key + ': ' + d.value; });
* // get a title function from 'second stack'
* var secondTitleFunction = chart.title('second stack');
* @param {String} [stackName]
* @param {Function} [titleAccessor]
* @returns {String|dc.stackMixin}
*/
dc.override(_chart, 'title', function (stackName, titleAccessor) {
if (!stackName) {
return _chart._title();
}
if (typeof stackName === 'function') {
return _chart._title(stackName);
}
if (stackName === _chart._groupName && typeof titleAccessor === 'function') {
return _chart._title(titleAccessor);
}
if (typeof titleAccessor !== 'function') {
return _titles[stackName] || _chart._title();
}
_titles[stackName] = titleAccessor;
return _chart;
});
/**
* Gets or sets the stack layout algorithm, which computes a baseline for each stack and
* propagates it to the next.
* @method stackLayout
* @memberof dc.stackMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Stack-Layout.md d3.layout.stack}
* @param {Function} [stack=d3.layout.stack]
* @returns {Function|dc.stackMixin}
*/
_chart.stackLayout = function (stack) {
if (!arguments.length) {
return _stackLayout;
}
_stackLayout = stack;
if (_stackLayout.values() === d3.layout.stack().values()) {
_stackLayout.values(prepareValues);
}
return _chart;
};
/**
* Since dc.js 2.0, there has been {@link https://github.com/dc-js/dc.js/issues/949 an issue}
* where points are filtered to the current domain. While this is a useful optimization, it is
* incorrectly implemented: the next point outside the domain is required in order to draw lines
* that are clipped to the bounds, as well as bars that are partly clipped.
*
* A fix will be included in dc.js 2.1.x, but a workaround is needed for dc.js 2.0 and until
* that fix is published, so set this flag to skip any filtering of points.
*
* Once the bug is fixed, this flag will have no effect, and it will be deprecated.
* @method evadeDomainFilter
* @memberof dc.stackMixin
* @instance
* @param {Boolean} [evadeDomainFilter=false]
* @returns {Boolean|dc.stackMixin}
*/
_chart.evadeDomainFilter = function (evadeDomainFilter) {
if (!arguments.length) {
return _evadeDomainFilter;
}
_evadeDomainFilter = evadeDomainFilter;
return _chart;
};
function visability (l) {
return !l.hidden;
}
_chart.data(function () {
var layers = _stack.filter(visability);
return layers.length ? _chart.stackLayout()(layers) : [];
});
_chart._ordinalXDomain = function () {
var flat = flattenStack().map(dc.pluck('data'));
var ordered = _chart._computeOrderedGroups(flat);
return ordered.map(_chart.keyAccessor());
};
_chart.colorAccessor(function (d) {
var layer = this.layer || this.name || d.name || d.layer;
return layer;
});
_chart.legendables = function () {
return _stack.map(function (layer, i) {
return {
chart: _chart,
name: layer.name,
hidden: layer.hidden || false,
color: _chart.getColor.call(layer, layer.values, i)
};
});
};
_chart.isLegendableHidden = function (d) {
var layer = findLayerByName(d.name);
return layer ? layer.hidden : false;
};
_chart.legendToggle = function (d) {
if (_hidableStacks) {
if (_chart.isLegendableHidden(d)) {
_chart.showStack(d.name);
} else {
_chart.hideStack(d.name);
}
//_chart.redraw();
_chart.renderGroup();
}
};
return _chart;
};
/**
* Cap is a mixin that groups small data elements below a _cap_ into an *others* grouping for both the
* Row and Pie Charts.
*
* The top ordered elements in the group up to the cap amount will be kept in the chart, and the rest
* will be replaced with an *others* element, with value equal to the sum of the replaced values. The
* keys of the elements below the cap limit are recorded in order to filter by those keys when the
* others* element is clicked.
* @name capMixin
* @memberof dc
* @mixin
* @param {Object} _chart
* @returns {dc.capMixin}
*/
dc.capMixin = function (_chart) {
var _cap = Infinity, _takeFront = true;
var _othersLabel = 'Others';
// emulate old group.top(N) ordering
_chart.ordering(function (kv) {
return -kv.value;
});
var _othersGrouper = function (topItems, restItems) {
var restItemsSum = d3.sum(restItems, _chart.valueAccessor()),
restKeys = restItems.map(_chart.keyAccessor());
if (restItemsSum > 0) {
return topItems.concat([{
others: restKeys,
key: _chart.othersLabel(),
value: restItemsSum
}]);
}
return topItems;
};
_chart.cappedKeyAccessor = function (d, i) {
if (d.others) {
return d.key;
}
return _chart.keyAccessor()(d, i);
};
_chart.cappedValueAccessor = function (d, i) {
if (d.others) {
return d.value;
}
return _chart.valueAccessor()(d, i);
};
// return N "top" groups, where N is the cap, sorted by baseMixin.ordering
// whether top means front or back depends on takeFront
_chart.data(function (group) {
if (_cap === Infinity) {
return _chart._computeOrderedGroups(group.all());
} else {
var items = group.all(), rest;
items = _chart._computeOrderedGroups(items); // sort by baseMixin.ordering
if (_cap) {
if (_takeFront) {
rest = items.slice(_cap);
items = items.slice(0, _cap);
} else {
var start = Math.max(0, items.length - _cap);
rest = items.slice(0, start);
items = items.slice(start);
}
}
if (_othersGrouper) {
return _othersGrouper(items, rest);
}
return items;
}
});
/**
* Get or set the count of elements to that will be included in the cap. If there is an
* {@link dc.capMixin#othersGrouper othersGrouper}, any further elements will be combined in an
* extra element with its name determined by {@link dc.capMixin#othersLabel othersLabel}.
*
* As of dc.js 2.1 and onward, the capped charts use
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#group_all group.all()}
* and {@link dc.baseMixin#ordering baseMixin.ordering()} to determine the order of
* elements. Then `cap` and {@link dc.capMixin#takeFront takeFront} determine how many elements
* to keep, from which end of the resulting array.
*
* **Migration note:** Up through dc.js 2.0.*, capping used
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#group_top group.top(N)},
* which selects the largest items according to
* {@link https://github.com/crossfilter/crossfilter/wiki/API-Reference#group_order group.order()}.
* The chart then sorted the items according to {@link dc.baseMixin#ordering baseMixin.ordering()}.
* So the two values essentially had to agree, but if the `group.order()` was incorrect (it's
* easy to forget about), the wrong rows or slices would be displayed, in the correct order.
*
* If your chart previously relied on `group.order()`, use `chart.ordering()` instead. As of
* 2.1.5, the ordering defaults to sorting from greatest to least like `group.top(N)` did.
*
* If you want to cap by one ordering but sort by another, please
* [file an issue](https://github.com/dc-js/dc.js/issues/new) - it's still possible but we'll
* need to work up an example.
* @method cap
* @memberof dc.capMixin
* @instance
* @param {Number} [count=Infinity]
* @returns {Number|dc.capMixin}
*/
_chart.cap = function (count) {
if (!arguments.length) {
return _cap;
}
_cap = count;
return _chart;
};
/**
* Get or set the direction of capping. If set, the chart takes the first
* {@link dc.capMixin#cap cap} elements from the sorted array of elements; otherwise
* it takes the last `cap` elements.
* @method takeFront
* @memberof dc.capMixin
* @instance
* @param {Boolean} [takeFront=true]
* @returns {Boolean|dc.capMixin}
*/
_chart.takeFront = function (takeFront) {
if (!arguments.length) {
return _takeFront;
}
_takeFront = takeFront;
return _chart;
};
/**
* Get or set the label for *Others* slice when slices cap is specified.
* @method othersLabel
* @memberof dc.capMixin
* @instance
* @param {String} [label="Others"]
* @returns {String|dc.capMixin}
*/
_chart.othersLabel = function (label) {
if (!arguments.length) {
return _othersLabel;
}
_othersLabel = label;
return _chart;
};
/**
* Get or set the grouper function that will perform the insertion of data for the *Others* slice
* if the slices cap is specified. If set to a falsy value, no others will be added.
*
* The grouper function takes an array of included ("top") items, and an array of the rest of
* the items. By default the grouper function computes the sum of the rest.
* @method othersGrouper
* @memberof dc.capMixin
* @instance
* @example
* // Do not show others
* chart.othersGrouper(null);
* // Default others grouper
* chart.othersGrouper(function (topItems, restItems) {
* var restItemsSum = d3.sum(restItems, _chart.valueAccessor()),
* restKeys = restItems.map(_chart.keyAccessor());
* if (restItemsSum > 0) {
* return topItems.concat([{
* others: restKeys,
* key: _chart.othersLabel(),
* value: restItemsSum
* }]);
* }
* return topItems;
* });
* @param {Function} [grouperFunction]
* @returns {Function|dc.capMixin}
*/
_chart.othersGrouper = function (grouperFunction) {
if (!arguments.length) {
return _othersGrouper;
}
_othersGrouper = grouperFunction;
return _chart;
};
dc.override(_chart, 'onClick', function (d) {
if (d.others) {
_chart.filter([d.others]);
}
_chart._onClick(d);
});
return _chart;
};
/**
* This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.
* @name bubbleMixin
* @memberof dc
* @mixin
* @mixes dc.colorMixin
* @param {Object} _chart
* @returns {dc.bubbleMixin}
*/
dc.bubbleMixin = function (_chart) {
var _maxBubbleRelativeSize = 0.3;
var _minRadiusWithLabel = 10;
var _sortBubbleSize = false;
var _elasticRadius = false;
_chart.BUBBLE_NODE_CLASS = 'node';
_chart.BUBBLE_CLASS = 'bubble';
_chart.MIN_RADIUS = 10;
_chart = dc.colorMixin(_chart);
_chart.renderLabel(true);
_chart.data(function (group) {
var data = group.all();
if (_sortBubbleSize) {
// sort descending so smaller bubbles are on top
var radiusAccessor = _chart.radiusValueAccessor();
data.sort(function (a, b) { return d3.descending(radiusAccessor(a), radiusAccessor(b)); });
}
return data;
});
var _r = d3.scale.linear().domain([0, 100]);
var _rValueAccessor = function (d) {
return d.r;
};
/**
* Get or set the bubble radius scale. By default the bubble chart uses
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md#linear d3.scale.linear().domain([0, 100])}
* as its radius scale.
* @method r
* @memberof dc.bubbleMixin
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Scales.md d3.scale}
* @param {d3.scale} [bubbleRadiusScale=d3.scale.linear().domain([0, 100])]
* @returns {d3.scale|dc.bubbleMixin}
*/
_chart.r = function (bubbleRadiusScale) {
if (!arguments.length) {
return _r;
}
_r = bubbleRadiusScale;
return _chart;
};
/**
* Turn on or off the elastic bubble radius feature, or return the value of the flag. If this
* feature is turned on, then bubble radii will be automatically rescaled to fit the chart better.
* @method elasticRadius
* @memberof dc.bubbleChart
* @instance
* @param {Boolean} [elasticRadius=false]
* @returns {Boolean|dc.bubbleChart}
*/
_chart.elasticRadius = function (elasticRadius) {
if (!arguments.length) {
return _elasticRadius;
}
_elasticRadius = elasticRadius;
return _chart;
};
_chart.calculateRadiusDomain = function () {
if (_elasticRadius) {
_chart.r().domain([_chart.rMin(), _chart.rMax()]);
}
};
/**
* Get or set the radius value accessor function. If set, the radius value accessor function will
* be used to retrieve a data value for each bubble. The data retrieved then will be mapped using
* the r scale to the actual bubble radius. This allows you to encode a data dimension using bubble
* size.
* @method radiusValueAccessor
* @memberof dc.bubbleMixin
* @instance
* @param {Function} [radiusValueAccessor]
* @returns {Function|dc.bubbleMixin}
*/
_chart.radiusValueAccessor = function (radiusValueAccessor) {
if (!arguments.length) {
return _rValueAccessor;
}
_rValueAccessor = radiusValueAccessor;
return _chart;
};
_chart.rMin = function () {
var min = d3.min(_chart.data(), function (e) {
return _chart.radiusValueAccessor()(e);
});
return min;
};
_chart.rMax = function () {
var max = d3.max(_chart.data(), function (e) {
return _chart.radiusValueAccessor()(e);
});
return max;
};
_chart.bubbleR = function (d) {
var value = _chart.radiusValueAccessor()(d);
var r = _chart.r()(value);
if (isNaN(r) || value <= 0) {
r = 0;
}
return r;
};
var labelFunction = function (d) {
return _chart.label()(d);
};
var shouldLabel = function (d) {
return (_chart.bubbleR(d) > _minRadiusWithLabel);
};
var labelOpacity = function (d) {
return shouldLabel(d) ? 1 : 0;
};
var labelPointerEvent = function (d) {
return shouldLabel(d) ? 'all' : 'none';
};
_chart._doRenderLabel = function (bubbleGEnter) {
if (_chart.renderLabel()) {
var label = bubbleGEnter.select('text');
if (label.empty()) {
label = bubbleGEnter.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '.3em')
.on('click', _chart.onClick);
}
label
.attr('opacity', 0)
.attr('pointer-events', labelPointerEvent)
.text(labelFunction);
dc.transition(label, _chart.transitionDuration(), _chart.transitionDelay())
.attr('opacity', labelOpacity);
}
};
_chart.doUpdateLabels = function (bubbleGEnter) {
if (_chart.renderLabel()) {
var labels = bubbleGEnter.select('text')
.attr('pointer-events', labelPointerEvent)
.text(labelFunction);
dc.transition(labels, _chart.transitionDuration(), _chart.transitionDelay())
.attr('opacity', labelOpacity);
}
};
var titleFunction = function (d) {
return _chart.title()(d);
};
_chart._doRenderTitles = function (g) {
if (_chart.renderTitle()) {
var title = g.select('title');
if (title.empty()) {
g.append('title').text(titleFunction);
}
}
};
_chart.doUpdateTitles = function (g) {
if (_chart.renderTitle()) {
g.select('title').text(titleFunction);
}
};
/**
* Turn on or off the bubble sorting feature, or return the value of the flag. If enabled,
* bubbles will be sorted by their radius, with smaller bubbles in front.
* @method sortBubbleSize
* @memberof dc.bubbleChart
* @instance
* @param {Boolean} [sortBubbleSize=false]
* @returns {Boolean|dc.bubbleChart}
*/
_chart.sortBubbleSize = function (sortBubbleSize) {
if (!arguments.length) {
return _sortBubbleSize;
}
_sortBubbleSize = sortBubbleSize;
return _chart;
};
/**
* Get or set the minimum radius. This will be used to initialize the radius scale's range.
* @method minRadius
* @memberof dc.bubbleMixin
* @instance
* @param {Number} [radius=10]
* @returns {Number|dc.bubbleMixin}
*/
_chart.minRadius = function (radius) {
if (!arguments.length) {
return _chart.MIN_RADIUS;
}
_chart.MIN_RADIUS = radius;
return _chart;
};
/**
* Get or set the minimum radius for label rendering. If a bubble's radius is less than this value
* then no label will be rendered.
* @method minRadiusWithLabel
* @memberof dc.bubbleMixin
* @instance
* @param {Number} [radius=10]
* @returns {Number|dc.bubbleMixin}
*/
_chart.minRadiusWithLabel = function (radius) {
if (!arguments.length) {
return _minRadiusWithLabel;
}
_minRadiusWithLabel = radius;
return _chart;
};
/**
* Get or set the maximum relative size of a bubble to the length of x axis. This value is useful
* when the difference in radius between bubbles is too great.
* @method maxBubbleRelativeSize
* @memberof dc.bubbleMixin
* @instance
* @param {Number} [relativeSize=0.3]
* @returns {Number|dc.bubbleMixin}
*/
_chart.maxBubbleRelativeSize = function (relativeSize) {
if (!arguments.length) {
return _maxBubbleRelativeSize;
}
_maxBubbleRelativeSize = relativeSize;
return _chart;
};
_chart.fadeDeselectedArea = function () {
if (_chart.hasFilter()) {
_chart.selectAll('g.' + _chart.BUBBLE_NODE_CLASS).each(function (d) {
if (_chart.isSelectedNode(d)) {
_chart.highlightSelected(this);
} else {
_chart.fadeDeselected(this);
}
});
} else {
_chart.selectAll('g.' + _chart.BUBBLE_NODE_CLASS).each(function () {
_chart.resetHighlight(this);
});
}
};
_chart.isSelectedNode = function (d) {
return _chart.hasFilter(d.key);
};
_chart.onClick = function (d) {
var filter = d.key;
dc.events.trigger(function () {
_chart.filter(filter);
_chart.redrawGroup();
});
};
return _chart;
};
/**
* The pie chart implementation is usually used to visualize a small categorical distribution. The pie
* 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 {@link dc.baseMixin#ordering ordering}
* which defaults to sorting by key.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
* @class pieChart
* @memberof dc
* @mixes dc.capMixin
* @mixes dc.colorMixin
* @mixes dc.baseMixin
* @example
* // create a pie chart under #chart-container1 element using the default global chart group
* var chart1 = dc.pieChart('#chart-container1');
* // create a pie chart under #chart-container2 element using chart group A
* var chart2 = dc.pieChart('#chart-container2', 'chartGroupA');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.pieChart}
*/
dc.pieChart = function (parent, chartGroup) {
var DEFAULT_MIN_ANGLE_FOR_LABEL = 0.5;
var _sliceCssClass = 'pie-slice';
var _labelCssClass = 'pie-label';
var _sliceGroupCssClass = 'pie-slice-group';
var _labelGroupCssClass = 'pie-label-group';
var _emptyCssClass = 'empty-chart';
var _emptyTitle = 'empty';
var _radius,
_givenRadius, // specified radius, if any
_innerRadius = 0,
_externalRadiusPadding = 0;
var _g;
var _cx;
var _cy;
var _minAngleForLabel = DEFAULT_MIN_ANGLE_FOR_LABEL;
var _externalLabelRadius;
var _drawPaths = false;
var _chart = dc.capMixin(dc.colorMixin(dc.baseMixin({})));
_chart.colorAccessor(_chart.cappedKeyAccessor);
_chart.title(function (d) {
return _chart.cappedKeyAccessor(d) + ': ' + _chart.cappedValueAccessor(d);
});
/**
* Get or set the maximum number of slices the pie chart will generate. The top slices are determined by
* value from high to low. Other slices exeeding the cap will be rolled up into one single *Others* slice.
* @method slicesCap
* @memberof dc.pieChart
* @instance
* @param {Number} [cap]
* @returns {Number|dc.pieChart}
*/
_chart.slicesCap = _chart.cap;
_chart.label(_chart.cappedKeyAccessor);
_chart.renderLabel(true);
_chart.transitionDuration(350);
_chart.transitionDelay(0);
_chart._doRender = function () {
_chart.resetSvg();
_g = _chart.svg()
.append('g')
.attr('transform', 'translate(' + _chart.cx() + ',' + _chart.cy() + ')');
_g.append('g').attr('class', _sliceGroupCssClass);
_g.append('g').attr('class', _labelGroupCssClass);
drawChart();
return _chart;
};
function drawChart () {
// set radius from chart size if none given, or if given radius is too large
var maxRadius = d3.min([_chart.width(), _chart.height()]) / 2;
_radius = _givenRadius && _givenRadius < maxRadius ? _givenRadius : maxRadius;
var arc = buildArcs();
var pie = pieLayout();
var pieData;
// if we have data...
if (d3.sum(_chart.data(), _chart.valueAccessor())) {
pieData = pie(_chart.data());
_g.classed(_emptyCssClass, false);
} else {
// otherwise we'd be getting NaNs, so override
// note: abuse others for its ignoring the value accessor
pieData = pie([{key: _emptyTitle, value: 1, others: [_emptyTitle]}]);
_g.classed(_emptyCssClass, true);
}
if (_g) {
var slices = _g.select('g.' + _sliceGroupCssClass)
.selectAll('g.' + _sliceCssClass)
.data(pieData);
var labels = _g.select('g.' + _labelGroupCssClass)
.selectAll('text.' + _labelCssClass)
.data(pieData);
createElements(slices, labels, arc, pieData);
updateElements(pieData, arc);
removeElements(slices, labels);
highlightFilter();
dc.transition(_g, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', 'translate(' + _chart.cx() + ',' + _chart.cy() + ')');
}
}
function createElements (slices, labels, arc, pieData) {
var slicesEnter = createSliceNodes(slices);
createSlicePath(slicesEnter, arc);
createTitles(slicesEnter);
createLabels(labels, pieData, arc);
}
function createSliceNodes (slices) {
var slicesEnter = slices
.enter()
.append('g')
.attr('class', function (d, i) {
return _sliceCssClass + ' _' + i;
});
return slicesEnter;
}
function createSlicePath (slicesEnter, arc) {
var slicePath = slicesEnter.append('path')
.attr('fill', fill)
.on('click', onClick)
.attr('d', function (d, i) {
return safeArc(d, i, arc);
});
var transition = dc.transition(slicePath, _chart.transitionDuration(), _chart.transitionDelay());
if (transition.attrTween) {
transition.attrTween('d', tweenPie);
}
}
function createTitles (slicesEnter) {
if (_chart.renderTitle()) {
slicesEnter.append('title').text(function (d) {
return _chart.title()(d.data);
});
}
}
_chart._applyLabelText = function (labels) {
labels
.text(function (d) {
var data = d.data;
if ((sliceHasNoData(data) || sliceTooSmall(d)) && !isSelectedSlice(d)) {
return '';
}
return _chart.label()(d.data);
});
};
function positionLabels (labels, arc) {
_chart._applyLabelText(labels);
dc.transition(labels, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', function (d) {
return labelPosition(d, arc);
})
.attr('text-anchor', 'middle');
}
function highlightSlice (i, whether) {
_chart.select('g.pie-slice._' + i)
.classed('highlight', whether);
}
function createLabels (labels, pieData, arc) {
if (_chart.renderLabel()) {
var labelsEnter = labels
.enter()
.append('text')
.attr('class', function (d, i) {
var classes = _sliceCssClass + ' ' + _labelCssClass + ' _' + i;
if (_externalLabelRadius) {
classes += ' external';
}
return classes;
})
.on('click', onClick)
.on('mouseover', function (d, i) {
highlightSlice(i, true);
})
.on('mouseout', function (d, i) {
highlightSlice(i, false);
});
positionLabels(labelsEnter, arc);
if (_externalLabelRadius && _drawPaths) {
updateLabelPaths(pieData, arc);
}
}
}
function updateLabelPaths (pieData, arc) {
var polyline = _g.selectAll('polyline.' + _sliceCssClass)
.data(pieData);
polyline
.enter()
.append('polyline')
.attr('class', function (d, i) {
return 'pie-path _' + i + ' ' + _sliceCssClass;
})
.on('click', onClick)
.on('mouseover', function (d, i) {
highlightSlice(i, true);
})
.on('mouseout', function (d, i) {
highlightSlice(i, false);
});
polyline.exit().remove();
var arc2 = d3.svg.arc()
.outerRadius(_radius - _externalRadiusPadding + _externalLabelRadius)
.innerRadius(_radius - _externalRadiusPadding);
var transition = dc.transition(polyline, _chart.transitionDuration(), _chart.transitionDelay());
// this is one rare case where d3.selection differs from d3.transition
if (transition.attrTween) {
transition
.attrTween('points', function (d) {
var current = this._current || d;
current = {startAngle: current.startAngle, endAngle: current.endAngle};
var interpolate = d3.interpolate(current, d);
this._current = interpolate(0);
return function (t) {
var d2 = interpolate(t);
return [arc.centroid(d2), arc2.centroid(d2)];
};
});
} else {
transition.attr('points', function (d) {
return [arc.centroid(d), arc2.centroid(d)];
});
}
transition.style('visibility', function (d) {
return d.endAngle - d.startAngle < 0.0001 ? 'hidden' : 'visible';
});
}
function updateElements (pieData, arc) {
updateSlicePaths(pieData, arc);
updateLabels(pieData, arc);
updateTitles(pieData);
}
function updateSlicePaths (pieData, arc) {
var slicePaths = _g.selectAll('g.' + _sliceCssClass)
.data(pieData)
.select('path')
.attr('d', function (d, i) {
return safeArc(d, i, arc);
});
var transition = dc.transition(slicePaths, _chart.transitionDuration(), _chart.transitionDelay());
if (transition.attrTween) {
transition.attrTween('d', tweenPie);
}
transition.attr('fill', fill);
}
function updateLabels (pieData, arc) {
if (_chart.renderLabel()) {
var labels = _g.selectAll('text.' + _labelCssClass)
.data(pieData);
positionLabels(labels, arc);
if (_externalLabelRadius && _drawPaths) {
updateLabelPaths(pieData, arc);
}
}
}
function updateTitles (pieData) {
if (_chart.renderTitle()) {
_g.selectAll('g.' + _sliceCssClass)
.data(pieData)
.select('title')
.text(function (d) {
return _chart.title()(d.data);
});
}
}
function removeElements (slices, labels) {
slices.exit().remove();
labels.exit().remove();
}
function highlightFilter () {
if (_chart.hasFilter()) {
_chart.selectAll('g.' + _sliceCssClass).each(function (d) {
if (isSelectedSlice(d)) {
_chart.highlightSelected(this);
} else {
_chart.fadeDeselected(this);
}
});
} else {
_chart.selectAll('g.' + _sliceCssClass).each(function () {
_chart.resetHighlight(this);
});
}
}
/**
* Get or set the external radius padding of the pie chart. This will force the radius of the
* pie chart to become smaller or larger depending on the value.
* @method externalRadiusPadding
* @memberof dc.pieChart
* @instance
* @param {Number} [externalRadiusPadding=0]
* @returns {Number|dc.pieChart}
*/
_chart.externalRadiusPadding = function (externalRadiusPadding) {
if (!arguments.length) {
return _externalRadiusPadding;
}
_externalRadiusPadding = externalRadiusPadding;
return _chart;
};
/**
* Get or set the inner radius of the pie chart. If the inner radius is greater than 0px then the
* pie chart will be rendered as a doughnut chart.
* @method innerRadius
* @memberof dc.pieChart
* @instance
* @param {Number} [innerRadius=0]
* @returns {Number|dc.pieChart}
*/
_chart.innerRadius = function (innerRadius) {
if (!arguments.length) {
return _innerRadius;
}
_innerRadius = innerRadius;
return _chart;
};
/**
* 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.
* @method radius
* @memberof dc.pieChart
* @instance
* @param {Number} [radius]
* @returns {Number|dc.pieChart}
*/
_chart.radius = function (radius) {
if (!arguments.length) {
return _givenRadius;
}
_givenRadius = radius;
return _chart;
};
/**
* Get or set center x coordinate position. Default is center of svg.
* @method cx
* @memberof dc.pieChart
* @instance
* @param {Number} [cx]
* @returns {Number|dc.pieChart}
*/
_chart.cx = function (cx) {
if (!arguments.length) {
return (_cx || _chart.width() / 2);
}
_cx = cx;
return _chart;
};
/**
* Get or set center y coordinate position. Default is center of svg.
* @method cy
* @memberof dc.pieChart
* @instance
* @param {Number} [cy]
* @returns {Number|dc.pieChart}
*/
_chart.cy = function (cy) {
if (!arguments.length) {
return (_cy || _chart.height() / 2);
}
_cy = cy;
return _chart;
};
function buildArcs () {
return d3.svg.arc()
.outerRadius(_radius - _externalRadiusPadding)
.innerRadius(_innerRadius);
}
function isSelectedSlice (d) {
return _chart.hasFilter(_chart.cappedKeyAccessor(d.data));
}
_chart._doRedraw = function () {
drawChart();
return _chart;
};
/**
* Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not
* display a slice label.
* @method minAngleForLabel
* @memberof dc.pieChart
* @instance
* @param {Number} [minAngleForLabel=0.5]
* @returns {Number|dc.pieChart}
*/
_chart.minAngleForLabel = function (minAngleForLabel) {
if (!arguments.length) {
return _minAngleForLabel;
}
_minAngleForLabel = minAngleForLabel;
return _chart;
};
function pieLayout () {
return d3.layout.pie().sort(null).value(_chart.cappedValueAccessor);
}
function sliceTooSmall (d) {
var angle = (d.endAngle - d.startAngle);
return isNaN(angle) || angle < _minAngleForLabel;
}
function sliceHasNoData (d) {
return _chart.cappedValueAccessor(d) === 0;
}
function tweenPie (b) {
b.innerRadius = _innerRadius;
var current = this._current;
if (isOffCanvas(current)) {
current = {startAngle: 0, endAngle: 0};
} else {
// only interpolate startAngle & endAngle, not the whole data object
current = {startAngle: current.startAngle, endAngle: current.endAngle};
}
var i = d3.interpolate(current, b);
this._current = i(0);
return function (t) {
return safeArc(i(t), 0, buildArcs());
};
}
function isOffCanvas (current) {
return !current || isNaN(current.startAngle) || isNaN(current.endAngle);
}
function fill (d, i) {
return _chart.getColor(d.data, i);
}
function onClick (d, i) {
if (_g.attr('class') !== _emptyCssClass) {
_chart.onClick(d.data, i);
}
}
function safeArc (d, i, arc) {
var path = arc(d, i);
if (path.indexOf('NaN') >= 0) {
path = 'M0,0';
}
return path;
}
/**
* Title to use for the only slice when there is no data.
* @method emptyTitle
* @memberof dc.pieChart
* @instance
* @param {String} [title]
* @returns {String|dc.pieChart}
*/
_chart.emptyTitle = function (title) {
if (arguments.length === 0) {
return _emptyTitle;
}
_emptyTitle = title;
return _chart;
};
/**
* Position slice labels offset from the outer edge of the chart.
*
* The argument specifies the extra radius to be added for slice labels.
* @method externalLabels
* @memberof dc.pieChart
* @instance
* @param {Number} [externalLabelRadius]
* @returns {Number|dc.pieChart}
*/
_chart.externalLabels = function (externalLabelRadius) {
if (arguments.length === 0) {
return _externalLabelRadius;
} else if (externalLabelRadius) {
_externalLabelRadius = externalLabelRadius;
} else {
_externalLabelRadius = undefined;
}
return _chart;
};
/**
* Get or set whether to draw lines from pie slices to their labels.
*
* @method drawPaths
* @memberof dc.pieChart
* @instance
* @param {Boolean} [drawPaths]
* @returns {Boolean|dc.pieChart}
*/
_chart.drawPaths = function (drawPaths) {
if (arguments.length === 0) {
return _drawPaths;
}
_drawPaths = drawPaths;
return _chart;
};
function labelPosition (d, arc) {
var centroid;
if (_externalLabelRadius) {
centroid = d3.svg.arc()
.outerRadius(_radius - _externalRadiusPadding + _externalLabelRadius)
.innerRadius(_radius - _externalRadiusPadding + _externalLabelRadius)
.centroid(d);
} else {
centroid = arc.centroid(d);
}
if (isNaN(centroid[0]) || isNaN(centroid[1])) {
return 'translate(0,0)';
} else {
return 'translate(' + centroid + ')';
}
}
_chart.legendables = function () {
return _chart.data().map(function (d, i) {
var legendable = {name: d.key, data: d.value, others: d.others, chart: _chart};
legendable.color = _chart.getColor(d, i);
return legendable;
});
};
_chart.legendHighlight = function (d) {
highlightSliceFromLegendable(d, true);
};
_chart.legendReset = function (d) {
highlightSliceFromLegendable(d, false);
};
_chart.legendToggle = function (d) {
_chart.onClick({key: d.name, others: d.others});
};
function highlightSliceFromLegendable (legendable, highlighted) {
_chart.selectAll('g.pie-slice').each(function (d) {
if (legendable.name === d.data.key) {
d3.select(this).classed('highlight', highlighted);
}
});
}
return _chart.anchor(parent, chartGroup);
};
/**
* Concrete bar chart/histogram implementation.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
* - {@link http://dc-js.github.com/dc.js/crime/index.html Canadian City Crime Stats}
* @class barChart
* @memberof dc
* @mixes dc.stackMixin
* @mixes dc.coordinateGridMixin
* @example
* // create a bar chart under #chart-container1 element using the default global chart group
* var chart1 = dc.barChart('#chart-container1');
* // create a bar chart under #chart-container2 element using chart group A
* var chart2 = dc.barChart('#chart-container2', 'chartGroupA');
* // create a sub-chart under a composite parent chart
* var chart3 = dc.barChart(compositeChart);
* @param {String|node|d3.selection|dc.compositeChart} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector}
* specifying a dom block element such as a div; or a dom element or d3 selection. If the bar
* chart is a sub-chart in a {@link dc.compositeChart Composite Chart} then pass in the parent
* composite chart instance instead.
* @param {String} [chartGroup] - 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.
* @returns {dc.barChart}
*/
dc.barChart = function (parent, chartGroup) {
var MIN_BAR_WIDTH = 1;
var DEFAULT_GAP_BETWEEN_BARS = 2;
var LABEL_PADDING = 3;
var _chart = dc.stackMixin(dc.coordinateGridMixin({}));
var _gap = DEFAULT_GAP_BETWEEN_BARS;
var _centerBar = false;
var _alwaysUseRounding = false;
var _barWidth;
dc.override(_chart, 'rescale', function () {
_chart._rescale();
_barWidth = undefined;
return _chart;
});
dc.override(_chart, 'render', function () {
if (_chart.round() && _centerBar && !_alwaysUseRounding) {
dc.logger.warn('By default, brush rounding is disabled if bars are centered. ' +
'See dc.js bar chart API documentation for details.');
}
return _chart._render();
});
_chart.label(function (d) {
return dc.utils.printSingleValue(d.y0 + d.y);
}, false);
_chart.plotData = function () {
var layers = _chart.chartBodyG().selectAll('g.stack')
.data(_chart.data());
calculateBarWidth();
layers
.enter()
.append('g')
.attr('class', function (d, i) {
return 'stack ' + '_' + i;
});
var last = layers.size() - 1;
layers.each(function (d, i) {
var layer = d3.select(this);
renderBars(layer, i, d);
if (_chart.renderLabel() && last === i) {
renderLabels(layer, i, d);
}
});
};
function barHeight (d) {
return dc.utils.safeNumber(Math.abs(_chart.y()(d.y + d.y0) - _chart.y()(d.y0)));
}
function renderLabels (layer, layerIndex, d) {
var labels = layer.selectAll('text.barLabel')
.data(d.values, dc.pluck('x'));
labels.enter()
.append('text')
.attr('class', 'barLabel')
.attr('text-anchor', 'middle');
if (_chart.isOrdinal()) {
labels.on('click', _chart.onClick);
labels.attr('cursor', 'pointer');
}
dc.transition(labels, _chart.transitionDuration(), _chart.transitionDelay())
.attr('x', function (d) {
var x = _chart.x()(d.x);
if (!_centerBar) {
x += _barWidth / 2;
}
return dc.utils.safeNumber(x);
})
.attr('y', function (d) {
var y = _chart.y()(d.y + d.y0);
if (d.y < 0) {
y -= barHeight(d);
}
return dc.utils.safeNumber(y - LABEL_PADDING);
})
.text(function (d) {
return _chart.label()(d);
});
dc.transition(labels.exit(), _chart.transitionDuration(), _chart.transitionDelay())
.attr('height', 0)
.remove();
}
function renderBars (layer, layerIndex, d) {
var bars = layer.selectAll('rect.bar')
.data(d.values, dc.pluck('x'));
var enter = bars.enter()
.append('rect')
.attr('class', 'bar')
.attr('fill', dc.pluck('data', _chart.getColor))
.attr('y', _chart.yAxisHeight())
.attr('height', 0);
if (_chart.renderTitle()) {
enter.append('title').text(dc.pluck('data', _chart.title(d.name)));
}
if (_chart.isOrdinal()) {
bars.on('click', _chart.onClick);
}
dc.transition(bars, _chart.transitionDuration(), _chart.transitionDelay())
.attr('x', function (d) {
var x = _chart.x()(d.x);
if (_centerBar) {
x -= _barWidth / 2;
}
if (_chart.isOrdinal() && _gap !== undefined) {
x += _gap / 2;
}
return dc.utils.safeNumber(x);
})
.attr('y', function (d) {
var y = _chart.y()(d.y + d.y0);
if (d.y < 0) {
y -= barHeight(d);
}
return dc.utils.safeNumber(y);
})
.attr('width', _barWidth)
.attr('height', function (d) {
return barHeight(d);
})
.attr('fill', dc.pluck('data', _chart.getColor))
.select('title').text(dc.pluck('data', _chart.title(d.name)));
dc.transition(bars.exit(), _chart.transitionDuration(), _chart.transitionDelay())
.attr('x', function (d) { return _chart.x()(d.x); })
.attr('width', _barWidth * 0.9)
.remove();
}
function calculateBarWidth () {
if (_barWidth === undefined) {
var numberOfBars = _chart.xUnitCount();
// please can't we always use rangeBands for bar charts?
if (_chart.isOrdinal() && _gap === undefined) {
_barWidth = Math.floor(_chart.x().rangeBand());
} else if (_gap) {
_barWidth = Math.floor((_chart.xAxisLength() - (numberOfBars - 1) * _gap) / numberOfBars);
} else {
_barWidth = Math.floor(_chart.xAxisLength() / (1 + _chart.barPadding()) / numberOfBars);
}
if (_barWidth === Infinity || isNaN(_barWidth) || _barWidth < MIN_BAR_WIDTH) {
_barWidth = MIN_BAR_WIDTH;
}
}
}
_chart.fadeDeselectedArea = function () {
var bars = _chart.chartBodyG().selectAll('rect.bar');
var extent = _chart.brush().extent();
if (_chart.isOrdinal()) {
if (_chart.hasFilter()) {
bars.classed(dc.constants.SELECTED_CLASS, function (d) {
return _chart.hasFilter(d.x);
});
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return !_chart.hasFilter(d.x);
});
} else {
bars.classed(dc.constants.SELECTED_CLASS, false);
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
} else {
if (!_chart.brushIsEmpty(extent)) {
var start = extent[0];
var end = extent[1];
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return d.x < start || d.x >= end;
});
} else {
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
}
};
/**
* Whether the bar chart will render each bar centered around the data position on the x-axis.
* @method centerBar
* @memberof dc.barChart
* @instance
* @param {Boolean} [centerBar=false]
* @returns {Boolean|dc.barChart}
*/
_chart.centerBar = function (centerBar) {
if (!arguments.length) {
return _centerBar;
}
_centerBar = centerBar;
return _chart;
};
dc.override(_chart, 'onClick', function (d) {
_chart._onClick(d.data);
});
/**
* Get or set the spacing between bars as a fraction of bar size. Valid values are between 0-1.
* Setting this value will also remove any previously set {@link dc.barChart#gap gap}. See the
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#ordinal_rangeBands d3 docs}
* for a visual description of how the padding is applied.
* @method barPadding
* @memberof dc.barChart
* @instance
* @param {Number} [barPadding=0]
* @returns {Number|dc.barChart}
*/
_chart.barPadding = function (barPadding) {
if (!arguments.length) {
return _chart._rangeBandPadding();
}
_chart._rangeBandPadding(barPadding);
_gap = undefined;
return _chart;
};
_chart._useOuterPadding = function () {
return _gap === undefined;
};
/**
* Get or set the outer padding on an ordinal bar chart. This setting has no effect on non-ordinal charts.
* Will pad the width by `padding * barWidth` on each side of the chart.
* @method outerPadding
* @memberof dc.barChart
* @instance
* @param {Number} [padding=0.5]
* @returns {Number|dc.barChart}
*/
_chart.outerPadding = _chart._outerRangeBandPadding;
/**
* Manually set fixed gap (in px) between bars instead of relying on the default auto-generated
* gap. By default the bar chart implementation will calculate and set the gap automatically
* based on the number of data points and the length of the x axis.
* @method gap
* @memberof dc.barChart
* @instance
* @param {Number} [gap=2]
* @returns {Number|dc.barChart}
*/
_chart.gap = function (gap) {
if (!arguments.length) {
return _gap;
}
_gap = gap;
return _chart;
};
_chart.extendBrush = function () {
var extent = _chart.brush().extent();
if (_chart.round() && (!_centerBar || _alwaysUseRounding)) {
extent[0] = extent.map(_chart.round())[0];
extent[1] = extent.map(_chart.round())[1];
_chart.chartBodyG().select('.brush')
.call(_chart.brush().extent(extent));
}
return extent;
};
/**
* Set or get whether rounding is enabled when bars are centered. If false, using
* rounding with centered bars will result in a warning and rounding will be ignored. This flag
* has no effect if bars are not {@link dc.barChart#centerBar centered}.
* When using standard d3.js rounding methods, the brush often doesn't align correctly with
* centered bars since the bars are offset. The rounding function must add an offset to
* compensate, such as in the following example.
* @method alwaysUseRounding
* @memberof dc.barChart
* @instance
* @example
* chart.round(function(n) { return Math.floor(n) + 0.5; });
* @param {Boolean} [alwaysUseRounding=false]
* @returns {Boolean|dc.barChart}
*/
_chart.alwaysUseRounding = function (alwaysUseRounding) {
if (!arguments.length) {
return _alwaysUseRounding;
}
_alwaysUseRounding = alwaysUseRounding;
return _chart;
};
function colorFilter (color, inv) {
return function () {
var item = d3.select(this);
var match = item.attr('fill') === color;
return inv ? !match : match;
};
}
_chart.legendHighlight = function (d) {
if (!_chart.isLegendableHidden(d)) {
_chart.g().selectAll('rect.bar')
.classed('highlight', colorFilter(d.color))
.classed('fadeout', colorFilter(d.color, true));
}
};
_chart.legendReset = function () {
_chart.g().selectAll('rect.bar')
.classed('highlight', false)
.classed('fadeout', false);
};
dc.override(_chart, 'xAxisMax', function () {
var max = this._xAxisMax();
if ('resolution' in _chart.xUnits()) {
var res = _chart.xUnits().resolution;
max += res;
}
return max;
});
return _chart.anchor(parent, chartGroup);
};
/**
* Concrete line/area chart implementation.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
* - {@link http://dc-js.github.com/dc.js/crime/index.html Canadian City Crime Stats}
* @class lineChart
* @memberof dc
* @mixes dc.stackMixin
* @mixes dc.coordinateGridMixin
* @example
* // create a line chart under #chart-container1 element using the default global chart group
* var chart1 = dc.lineChart('#chart-container1');
* // create a line chart under #chart-container2 element using chart group A
* var chart2 = dc.lineChart('#chart-container2', 'chartGroupA');
* // create a sub-chart under a composite parent chart
* var chart3 = dc.lineChart(compositeChart);
* @param {String|node|d3.selection|dc.compositeChart} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector}
* specifying a dom block element such as a div; or a dom element or d3 selection. If the line
* chart is a sub-chart in a {@link dc.compositeChart Composite Chart} then pass in the parent
* composite chart instance instead.
* @param {String} [chartGroup] - 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.
* @returns {dc.lineChart}
*/
dc.lineChart = function (parent, chartGroup) {
var DEFAULT_DOT_RADIUS = 5;
var TOOLTIP_G_CLASS = 'dc-tooltip';
var DOT_CIRCLE_CLASS = 'dot';
var Y_AXIS_REF_LINE_CLASS = 'yRef';
var X_AXIS_REF_LINE_CLASS = 'xRef';
var DEFAULT_DOT_OPACITY = 1e-6;
var LABEL_PADDING = 3;
var _chart = dc.stackMixin(dc.coordinateGridMixin({}));
var _renderArea = false;
var _dotRadius = DEFAULT_DOT_RADIUS;
var _dataPointRadius = null;
var _dataPointFillOpacity = DEFAULT_DOT_OPACITY;
var _dataPointStrokeOpacity = DEFAULT_DOT_OPACITY;
var _interpolate = 'linear';
var _tension = 0.7;
var _defined;
var _dashStyle;
var _xyTipsOn = true;
_chart.transitionDuration(500);
_chart.transitionDelay(0);
_chart._rangeBandPadding(1);
_chart.plotData = function () {
var chartBody = _chart.chartBodyG();
var layersList = chartBody.select('g.stack-list');
if (layersList.empty()) {
layersList = chartBody.append('g').attr('class', 'stack-list');
}
var layers = layersList.selectAll('g.stack').data(_chart.data());
var layersEnter = layers
.enter()
.append('g')
.attr('class', function (d, i) {
return 'stack ' + '_' + i;
});
drawLine(layersEnter, layers);
drawArea(layersEnter, layers);
drawDots(chartBody, layers);
if (_chart.renderLabel()) {
drawLabels(layers);
}
};
/**
* Gets or sets the interpolator to use for lines drawn, by string name, allowing e.g. step
* functions, splines, and cubic interpolation. This is passed to
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#line_interpolate d3.svg.line.interpolate} and
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#area_interpolate d3.svg.area.interpolate},
* where you can find a complete list of valid arguments.
* @method interpolate
* @memberof dc.lineChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#line_interpolate d3.svg.line.interpolate}
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#area_interpolate d3.svg.area.interpolate}
* @param {String} [interpolate='linear']
* @returns {String|dc.lineChart}
*/
_chart.interpolate = function (interpolate) {
if (!arguments.length) {
return _interpolate;
}
_interpolate = interpolate;
return _chart;
};
/**
* Gets or sets the tension to use for lines drawn, in the range 0 to 1.
* This parameter further customizes the interpolation behavior. It is passed to
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#line_tension d3.svg.line.tension} and
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#area_tension d3.svg.area.tension}.
* @method tension
* @memberof dc.lineChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#line_interpolate d3.svg.line.interpolate}
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#area_interpolate d3.svg.area.interpolate}
* @param {Number} [tension=0.7]
* @returns {Number|dc.lineChart}
*/
_chart.tension = function (tension) {
if (!arguments.length) {
return _tension;
}
_tension = tension;
return _chart;
};
/**
* Gets or sets a function that will determine discontinuities in the line which should be
* skipped: the path will be broken into separate subpaths if some points are undefined.
* This function is passed to
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#line_defined d3.svg.line.defined}
*
* Note: crossfilter will sometimes coerce nulls to 0, so you may need to carefully write
* custom reduce functions to get this to work, depending on your data. See
* {@link https://github.com/dc-js/dc.js/issues/615#issuecomment-49089248 this GitHub comment}
* for more details and an example.
* @method defined
* @memberof dc.lineChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#line_defined d3.svg.line.defined}
* @param {Function} [defined]
* @returns {Function|dc.lineChart}
*/
_chart.defined = function (defined) {
if (!arguments.length) {
return _defined;
}
_defined = defined;
return _chart;
};
/**
* Set the line's d3 dashstyle. This value becomes the 'stroke-dasharray' of line. Defaults to empty
* array (solid line).
* @method dashStyle
* @memberof dc.lineChart
* @instance
* @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray}
* @example
* // create a Dash Dot Dot Dot
* chart.dashStyle([3,1,1,1]);
* @param {Array<Number>} [dashStyle=[]]
* @returns {Array<Number>|dc.lineChart}
*/
_chart.dashStyle = function (dashStyle) {
if (!arguments.length) {
return _dashStyle;
}
_dashStyle = dashStyle;
return _chart;
};
/**
* Get or set render area flag. If the flag is set to true then the chart will render the area
* beneath each line and the line chart effectively becomes an area chart.
* @method renderArea
* @memberof dc.lineChart
* @instance
* @param {Boolean} [renderArea=false]
* @returns {Boolean|dc.lineChart}
*/
_chart.renderArea = function (renderArea) {
if (!arguments.length) {
return _renderArea;
}
_renderArea = renderArea;
return _chart;
};
function colors (d, i) {
return _chart.getColor.call(d, d.values, i);
}
function drawLine (layersEnter, layers) {
var line = d3.svg.line()
.x(function (d) {
return _chart.x()(d.x);
})
.y(function (d) {
return _chart.y()(d.y + d.y0);
})
.interpolate(_interpolate)
.tension(_tension);
if (_defined) {
line.defined(_defined);
}
var path = layersEnter.append('path')
.attr('class', 'line')
.attr('stroke', colors);
if (_dashStyle) {
path.attr('stroke-dasharray', _dashStyle);
}
dc.transition(layers.select('path.line'), _chart.transitionDuration(), _chart.transitionDelay())
//.ease('linear')
.attr('stroke', colors)
.attr('d', function (d) {
return safeD(line(d.values));
});
}
function drawArea (layersEnter, layers) {
if (_renderArea) {
var area = d3.svg.area()
.x(function (d) {
return _chart.x()(d.x);
})
.y(function (d) {
return _chart.y()(d.y + d.y0);
})
.y0(function (d) {
return _chart.y()(d.y0);
})
.interpolate(_interpolate)
.tension(_tension);
if (_defined) {
area.defined(_defined);
}
layersEnter.append('path')
.attr('class', 'area')
.attr('fill', colors)
.attr('d', function (d) {
return safeD(area(d.values));
});
dc.transition(layers.select('path.area'), _chart.transitionDuration(), _chart.transitionDelay())
//.ease('linear')
.attr('fill', colors)
.attr('d', function (d) {
return safeD(area(d.values));
});
}
}
function safeD (d) {
return (!d || d.indexOf('NaN') >= 0) ? 'M0,0' : d;
}
function drawDots (chartBody, layers) {
if (_chart.xyTipsOn() === 'always' || (!_chart.brushOn() && _chart.xyTipsOn())) {
var tooltipListClass = TOOLTIP_G_CLASS + '-list';
var tooltips = chartBody.select('g.' + tooltipListClass);
if (tooltips.empty()) {
tooltips = chartBody.append('g').attr('class', tooltipListClass);
}
layers.each(function (d, layerIndex) {
var points = d.values;
if (_defined) {
points = points.filter(_defined);
}
var g = tooltips.select('g.' + TOOLTIP_G_CLASS + '._' + layerIndex);
if (g.empty()) {
g = tooltips.append('g').attr('class', TOOLTIP_G_CLASS + ' _' + layerIndex);
}
createRefLines(g);
var dots = g.selectAll('circle.' + DOT_CIRCLE_CLASS)
.data(points, dc.pluck('x'));
dots.enter()
.append('circle')
.attr('class', DOT_CIRCLE_CLASS)
.attr('r', getDotRadius())
.style('fill-opacity', _dataPointFillOpacity)
.style('stroke-opacity', _dataPointStrokeOpacity)
.attr('fill', _chart.getColor)
.on('mousemove', function () {
var dot = d3.select(this);
showDot(dot);
showRefLines(dot, g);
})
.on('mouseout', function () {
var dot = d3.select(this);
hideDot(dot);
hideRefLines(g);
});
dots.call(renderTitle, d);
dc.transition(dots, _chart.transitionDuration())
.attr('cx', function (d) {
return dc.utils.safeNumber(_chart.x()(d.x));
})
.attr('cy', function (d) {
return dc.utils.safeNumber(_chart.y()(d.y + d.y0));
})
.attr('fill', _chart.getColor);
dots.exit().remove();
});
}
}
_chart.label(function (d) {
return dc.utils.printSingleValue(d.y0 + d.y);
}, false);
function drawLabels (layers) {
layers.each(function (d, layerIndex) {
var layer = d3.select(this);
var labels = layer.selectAll('text.lineLabel')
.data(d.values, dc.pluck('x'));
labels.enter()
.append('text')
.attr('class', 'lineLabel')
.attr('text-anchor', 'middle');
dc.transition(labels, _chart.transitionDuration())
.attr('x', function (d) {
return dc.utils.safeNumber(_chart.x()(d.x));
})
.attr('y', function (d) {
var y = _chart.y()(d.y + d.y0) - LABEL_PADDING;
return dc.utils.safeNumber(y);
})
.text(function (d) {
return _chart.label()(d);
});
dc.transition(labels.exit(), _chart.transitionDuration())
.attr('height', 0)
.remove();
});
}
function createRefLines (g) {
var yRefLine = g.select('path.' + Y_AXIS_REF_LINE_CLASS).empty() ?
g.append('path').attr('class', Y_AXIS_REF_LINE_CLASS) : g.select('path.' + Y_AXIS_REF_LINE_CLASS);
yRefLine.style('display', 'none').attr('stroke-dasharray', '5,5');
var xRefLine = g.select('path.' + X_AXIS_REF_LINE_CLASS).empty() ?
g.append('path').attr('class', X_AXIS_REF_LINE_CLASS) : g.select('path.' + X_AXIS_REF_LINE_CLASS);
xRefLine.style('display', 'none').attr('stroke-dasharray', '5,5');
}
function showDot (dot) {
dot.style('fill-opacity', 0.8);
dot.style('stroke-opacity', 0.8);
dot.attr('r', _dotRadius);
return dot;
}
function showRefLines (dot, g) {
var x = dot.attr('cx');
var y = dot.attr('cy');
var yAxisX = (_chart._yAxisX() - _chart.margins().left);
var yAxisRefPathD = 'M' + yAxisX + ' ' + y + 'L' + (x) + ' ' + (y);
var xAxisRefPathD = 'M' + x + ' ' + _chart.yAxisHeight() + 'L' + x + ' ' + y;
g.select('path.' + Y_AXIS_REF_LINE_CLASS).style('display', '').attr('d', yAxisRefPathD);
g.select('path.' + X_AXIS_REF_LINE_CLASS).style('display', '').attr('d', xAxisRefPathD);
}
function getDotRadius () {
return _dataPointRadius || _dotRadius;
}
function hideDot (dot) {
dot.style('fill-opacity', _dataPointFillOpacity)
.style('stroke-opacity', _dataPointStrokeOpacity)
.attr('r', getDotRadius());
}
function hideRefLines (g) {
g.select('path.' + Y_AXIS_REF_LINE_CLASS).style('display', 'none');
g.select('path.' + X_AXIS_REF_LINE_CLASS).style('display', 'none');
}
function renderTitle (dot, d) {
if (_chart.renderTitle()) {
dot.select('title').remove();
dot.append('title').text(dc.pluck('data', _chart.title(d.name)));
}
}
/**
* Turn on/off the mouseover behavior of an individual data point which renders a circle and x/y axis
* dashed lines back to each respective axis. This is ignored if the chart
* {@link dc.coordinateGridMixin#brushOn brush} is on
* @method xyTipsOn
* @memberof dc.lineChart
* @instance
* @param {Boolean} [xyTipsOn=false]
* @returns {Boolean|dc.lineChart}
*/
_chart.xyTipsOn = function (xyTipsOn) {
if (!arguments.length) {
return _xyTipsOn;
}
_xyTipsOn = xyTipsOn;
return _chart;
};
/**
* Get or set the radius (in px) for dots displayed on the data points.
* @method dotRadius
* @memberof dc.lineChart
* @instance
* @param {Number} [dotRadius=5]
* @returns {Number|dc.lineChart}
*/
_chart.dotRadius = function (dotRadius) {
if (!arguments.length) {
return _dotRadius;
}
_dotRadius = dotRadius;
return _chart;
};
/**
* Always show individual dots for each datapoint.
*
* If `options` is falsy, it disables data point rendering. If no `options` are provided, the
* current `options` values are instead returned.
* @method renderDataPoints
* @memberof dc.lineChart
* @instance
* @example
* chart.renderDataPoints({radius: 2, fillOpacity: 0.8, strokeOpacity: 0.8})
* @param {{fillOpacity: Number, strokeOpacity: Number, radius: Number}} [options={fillOpacity: 0.8, strokeOpacity: 0.8, radius: 2}]
* @returns {{fillOpacity: Number, strokeOpacity: Number, radius: Number}|dc.lineChart}
*/
_chart.renderDataPoints = function (options) {
if (!arguments.length) {
return {
fillOpacity: _dataPointFillOpacity,
strokeOpacity: _dataPointStrokeOpacity,
radius: _dataPointRadius
};
} else if (!options) {
_dataPointFillOpacity = DEFAULT_DOT_OPACITY;
_dataPointStrokeOpacity = DEFAULT_DOT_OPACITY;
_dataPointRadius = null;
} else {
_dataPointFillOpacity = options.fillOpacity || 0.8;
_dataPointStrokeOpacity = options.strokeOpacity || 0.8;
_dataPointRadius = options.radius || 2;
}
return _chart;
};
function colorFilter (color, dashstyle, inv) {
return function () {
var item = d3.select(this);
var match = (item.attr('stroke') === color &&
item.attr('stroke-dasharray') === ((dashstyle instanceof Array) ?
dashstyle.join(',') : null)) || item.attr('fill') === color;
return inv ? !match : match;
};
}
_chart.legendHighlight = function (d) {
if (!_chart.isLegendableHidden(d)) {
_chart.g().selectAll('path.line, path.area')
.classed('highlight', colorFilter(d.color, d.dashstyle))
.classed('fadeout', colorFilter(d.color, d.dashstyle, true));
}
};
_chart.legendReset = function () {
_chart.g().selectAll('path.line, path.area')
.classed('highlight', false)
.classed('fadeout', false);
};
dc.override(_chart, 'legendables', function () {
var legendables = _chart._legendables();
if (!_dashStyle) {
return legendables;
}
return legendables.map(function (l) {
l.dashstyle = _dashStyle;
return l;
});
});
return _chart.anchor(parent, chartGroup);
};
/**
* The data count widget is a simple widget designed to display the number of records selected by the
* current filters out of the total number of records in the data set. Once created the data count widget
* will automatically update the text content of child elements with the following classes:
*
* * `.total-count` - total number of records
* * `.filter-count` - number of records matched by the current filters
*
* Note: this widget works best for the specific case of showing the number of records out of a
* total. If you want a more general-purpose numeric display, please use the
* {@link dc.numberDisplay} widget instead.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
* @class dataCount
* @memberof dc
* @mixes dc.baseMixin
* @example
* var ndx = crossfilter(data);
* var all = ndx.groupAll();
*
* dc.dataCount('.dc-data-count')
* .dimension(ndx)
* .group(all);
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.dataCount}
*/
dc.dataCount = function (parent, chartGroup) {
var _formatNumber = d3.format(',d');
var _chart = dc.baseMixin({});
var _html = {some: '', all: ''};
/**
* Gets or sets an optional object specifying HTML templates to use depending how many items are
* selected. The text `%total-count` will replaced with the total number of records, and the text
* `%filter-count` will be replaced with the number of selected records.
* - all: HTML template to use if all items are selected
* - some: HTML template to use if not all items are selected
* @method html
* @memberof dc.dataCount
* @instance
* @example
* counter.html({
* some: '%filter-count out of %total-count records selected',
* all: 'All records selected. Click on charts to apply filters'
* })
* @param {{some:String, all: String}} [options]
* @returns {{some:String, all: String}|dc.dataCount}
*/
_chart.html = function (options) {
if (!arguments.length) {
return _html;
}
if (options.all) {
_html.all = options.all;
}
if (options.some) {
_html.some = options.some;
}
return _chart;
};
/**
* Gets or sets an optional function to format the filter count and total count.
* @method formatNumber
* @memberof dc.dataCount
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md d3.format}
* @example
* counter.formatNumber(d3.format('.2g'))
* @param {Function} [formatter=d3.format('.2g')]
* @returns {Function|dc.dataCount}
*/
_chart.formatNumber = function (formatter) {
if (!arguments.length) {
return _formatNumber;
}
_formatNumber = formatter;
return _chart;
};
_chart._doRender = function () {
var tot = _chart.dimension().size(),
val = _chart.group().value();
var all = _formatNumber(tot);
var selected = _formatNumber(val);
if ((tot === val) && (_html.all !== '')) {
_chart.root().html(_html.all.replace('%total-count', all).replace('%filter-count', selected));
} else if (_html.some !== '') {
_chart.root().html(_html.some.replace('%total-count', all).replace('%filter-count', selected));
} else {
_chart.selectAll('.total-count').text(all);
_chart.selectAll('.filter-count').text(selected);
}
return _chart;
};
_chart._doRedraw = function () {
return _chart._doRender();
};
return _chart.anchor(parent, chartGroup);
};
/**
* The data table is a simple widget designed to list crossfilter focused data set (rows being
* filtered) in a good old tabular fashion.
*
* Note: Unlike other charts, the data table (and data grid chart) use the {@link dc.dataTable#group group} attribute as a
* keying function for {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#nest nesting} the data
* together in groups. Do not pass in a crossfilter group as this will not work.
*
* Another interesting feature of the data table is that you can pass a crossfilter group to the `dimension`, as
* long as you specify the {@link dc.dataTable#order order} as `d3.descending`, since the data
* table will use `dimension.top()` to fetch the data in that case, and the method is equally
* supported on the crossfilter group as the crossfilter dimension.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
* - {@link http://dc-js.github.io/dc.js/examples/table-on-aggregated-data.html dataTable on a crossfilter group}
* ({@link https://github.com/dc-js/dc.js/blob/develop/web/examples/table-on-aggregated-data.html source})
* @class dataTable
* @memberof dc
* @mixes dc.baseMixin
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.dataTable}
*/
dc.dataTable = function (parent, chartGroup) {
var LABEL_CSS_CLASS = 'dc-table-label';
var ROW_CSS_CLASS = 'dc-table-row';
var COLUMN_CSS_CLASS = 'dc-table-column';
var GROUP_CSS_CLASS = 'dc-table-group';
var HEAD_CSS_CLASS = 'dc-table-head';
var _chart = dc.baseMixin({});
var _size = 25;
var _columns = [];
var _sortBy = function (d) {
return d;
};
var _order = d3.ascending;
var _beginSlice = 0;
var _endSlice;
var _showGroups = true;
_chart._doRender = function () {
_chart.selectAll('tbody').remove();
renderRows(renderGroups());
return _chart;
};
_chart._doColumnValueFormat = function (v, d) {
return ((typeof v === 'function') ?
v(d) : // v as function
((typeof v === 'string') ?
d[v] : // v is field name string
v.format(d) // v is Object, use fn (element 2)
)
);
};
_chart._doColumnHeaderFormat = function (d) {
// if 'function', convert to string representation
// show a string capitalized
// if an object then display its label string as-is.
return (typeof d === 'function') ?
_chart._doColumnHeaderFnToString(d) :
((typeof d === 'string') ?
_chart._doColumnHeaderCapitalize(d) : String(d.label));
};
_chart._doColumnHeaderCapitalize = function (s) {
// capitalize
return s.charAt(0).toUpperCase() + s.slice(1);
};
_chart._doColumnHeaderFnToString = function (f) {
// columnString(f) {
var s = String(f);
var i1 = s.indexOf('return ');
if (i1 >= 0) {
var i2 = s.lastIndexOf(';');
if (i2 >= 0) {
s = s.substring(i1 + 7, i2);
var i3 = s.indexOf('numberFormat');
if (i3 >= 0) {
s = s.replace('numberFormat', '');
}
}
}
return s;
};
function renderGroups () {
// The 'original' example uses all 'functions'.
// If all 'functions' are used, then don't remove/add a header, and leave
// the html alone. This preserves the functionality of earlier releases.
// A 2nd option is a string representing a field in the data.
// A third option is to supply an Object such as an array of 'information', and
// supply your own _doColumnHeaderFormat and _doColumnValueFormat functions to
// create what you need.
var bAllFunctions = true;
_columns.forEach(function (f) {
bAllFunctions = bAllFunctions & (typeof f === 'function');
});
if (!bAllFunctions) {
// ensure one thead
var thead = _chart.selectAll('thead').data([0]);
thead.enter().append('thead');
thead.exit().remove();
// with one tr
var headrow = thead.selectAll('tr').data([0]);
headrow.enter().append('tr');
headrow.exit().remove();
// with a th for each column
var headcols = headrow.selectAll('th')
.data(_columns);
headcols.enter().append('th');
headcols.exit().remove();
headcols
.attr('class', HEAD_CSS_CLASS)
.html(function (d) {
return (_chart._doColumnHeaderFormat(d));
});
}
var groups = _chart.root().selectAll('tbody')
.data(nestEntries(), function (d) {
return _chart.keyAccessor()(d);
});
var rowGroup = groups
.enter()
.append('tbody');
if (_showGroups === true) {
rowGroup
.append('tr')
.attr('class', GROUP_CSS_CLASS)
.append('td')
.attr('class', LABEL_CSS_CLASS)
.attr('colspan', _columns.length)
.html(function (d) {
return _chart.keyAccessor()(d);
});
}
groups.exit().remove();
return rowGroup;
}
function nestEntries () {
var entries;
if (_order === d3.ascending) {
entries = _chart.dimension().bottom(_size);
} else {
entries = _chart.dimension().top(_size);
}
return d3.nest()
.key(_chart.group())
.sortKeys(_order)
.entries(entries.sort(function (a, b) {
return _order(_sortBy(a), _sortBy(b));
}).slice(_beginSlice, _endSlice));
}
function renderRows (groups) {
var rows = groups.order()
.selectAll('tr.' + ROW_CSS_CLASS)
.data(function (d) {
return d.values;
});
var rowEnter = rows.enter()
.append('tr')
.attr('class', ROW_CSS_CLASS);
_columns.forEach(function (v, i) {
rowEnter.append('td')
.attr('class', COLUMN_CSS_CLASS + ' _' + i)
.html(function (d) {
return _chart._doColumnValueFormat(v, d);
});
});
rows.exit().remove();
return rows;
}
_chart._doRedraw = function () {
return _chart._doRender();
};
/**
* Get or set the group function for the data table. The group function takes a data row and
* returns the key to specify to {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_nest d3.nest}
* to split rows into groups.
*
* Do not pass in a crossfilter group as this will not work.
* @method group
* @memberof dc.dataTable
* @instance
* @example
* // group rows by the value of their field
* chart
* .group(function(d) { return d.field; })
* @param {Function} groupFunction Function taking a row of data and returning the nest key.
* @returns {Function|dc.dataTable}
*/
/**
* Get or set the table size which determines the number of rows displayed by the widget.
* @method size
* @memberof dc.dataTable
* @instance
* @param {Number} [size=25]
* @returns {Number|dc.dataTable}
*/
_chart.size = function (size) {
if (!arguments.length) {
return _size;
}
_size = size;
return _chart;
};
/**
* Get or set the index of the beginning slice which determines which entries get displayed
* by the widget. Useful when implementing pagination.
*
* Note: the sortBy function will determine how the rows are ordered for pagination purposes.
* See the {@link http://dc-js.github.io/dc.js/examples/table-pagination.html table pagination example}
* to see how to implement the pagination user interface using `beginSlice` and `endSlice`.
* @method beginSlice
* @memberof dc.dataTable
* @instance
* @param {Number} [beginSlice=0]
* @returns {Number|dc.dataTable}
*/
_chart.beginSlice = function (beginSlice) {
if (!arguments.length) {
return _beginSlice;
}
_beginSlice = beginSlice;
return _chart;
};
/**
* Get or set the index of the end slice which determines which entries get displayed by the
* widget. Useful when implementing pagination. See {@link dc.dataTable#beginSlice `beginSlice`} for more information.
* @method endSlice
* @memberof dc.dataTable
* @instance
* @param {Number|undefined} [endSlice=undefined]
* @returns {Number|dc.dataTable}
*/
_chart.endSlice = function (endSlice) {
if (!arguments.length) {
return _endSlice;
}
_endSlice = endSlice;
return _chart;
};
/**
* Get or set column functions. The data table widget supports several methods of specifying the
* columns to display.
*
* The original method uses an array of functions to generate dynamic columns. Column functions
* are simple javascript functions with only one input argument `d` which represents a row in
* the data set. The return value of these functions will be used to generate the content for
* each cell. However, this method requires the HTML for the table to have a fixed set of column
* headers.
*
* <pre><code>chart.columns([
* function(d) { return d.date; },
* function(d) { return d.open; },
* function(d) { return d.close; },
* function(d) { return numberFormat(d.close - d.open); },
* function(d) { return d.volume; }
* ]);
* </code></pre>
*
* In the second method, you can list the columns to read from the data without specifying it as
* a function, except where necessary (ie, computed columns). Note the data element name is
* capitalized when displayed in the table header. You can also mix in functions as necessary,
* using the third `{label, format}` form, as shown below.
*
* <pre><code>chart.columns([
* "date", // d["date"], ie, a field accessor; capitalized automatically
* "open", // ...
* "close", // ...
* {
* label: "Change",
* format: function (d) {
* return numberFormat(d.close - d.open);
* }
* },
* "volume" // d["volume"], ie, a field accessor; capitalized automatically
* ]);
* </code></pre>
*
* In the third example, we specify all fields using the `{label, format}` method:
* <pre><code>chart.columns([
* {
* label: "Date",
* format: function (d) { return d.date; }
* },
* {
* label: "Open",
* format: function (d) { return numberFormat(d.open); }
* },
* {
* label: "Close",
* format: function (d) { return numberFormat(d.close); }
* },
* {
* label: "Change",
* format: function (d) { return numberFormat(d.close - d.open); }
* },
* {
* label: "Volume",
* format: function (d) { return d.volume; }
* }
* ]);
* </code></pre>
*
* You may wish to override the dataTable functions `_doColumnHeaderCapitalize` and
* `_doColumnHeaderFnToString`, which are used internally to translate the column information or
* function into a displayed header. The first one is used on the "string" column specifier; the
* second is used to transform a stringified function into something displayable. For the Stock
* example, the function for Change becomes the table header **d.close - d.open**.
*
* Finally, you can even specify a completely different form of column definition. To do this,
* override `_chart._doColumnHeaderFormat` and `_chart._doColumnValueFormat` Be aware that
* fields without numberFormat specification will be displayed just as they are stored in the
* data, unformatted.
* @method columns
* @memberof dc.dataTable
* @instance
* @param {Array<Function>} [columns=[]]
* @returns {Array<Function>}|dc.dataTable}
*/
_chart.columns = function (columns) {
if (!arguments.length) {
return _columns;
}
_columns = columns;
return _chart;
};
/**
* Get or set sort-by function. This function works as a value accessor at row level and returns a
* particular field to be sorted by.
* @method sortBy
* @memberof dc.dataTable
* @instance
* @example
* chart.sortBy(function(d) {
* return d.date;
* });
* @param {Function} [sortBy=identity function]
* @returns {Function|dc.dataTable}
*/
_chart.sortBy = function (sortBy) {
if (!arguments.length) {
return _sortBy;
}
_sortBy = sortBy;
return _chart;
};
/**
* Get or set sort order. If the order is `d3.ascending`, the data table will use
* `dimension().bottom()` to fetch the data; otherwise it will use `dimension().top()`
* @method order
* @memberof dc.dataTable
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_ascending d3.ascending}
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_descending d3.descending}
* @example
* chart.order(d3.descending);
* @param {Function} [order=d3.ascending]
* @returns {Function|dc.dataTable}
*/
_chart.order = function (order) {
if (!arguments.length) {
return _order;
}
_order = order;
return _chart;
};
/**
* Get or set if group rows will be shown. The dataTable {@link dc.dataTable#group group}
* function must be specified even if groups are not shown.
* @method showGroups
* @memberof dc.dataTable
* @instance
* @example
* chart
* .group([value], [name])
* .showGroups(true|false);
* @param {Boolean} [showGroups=true]
* @returns {Boolean|dc.dataTable}
*/
_chart.showGroups = function (showGroups) {
if (!arguments.length) {
return _showGroups;
}
_showGroups = showGroups;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
* Data grid is a simple widget designed to list the filtered records, providing
* a simple way to define how the items are displayed.
*
* Note: Unlike other charts, the data grid chart (and data table) use the {@link dc.dataGrid#group group} attribute as a keying function
* for {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#nest nesting} the data together in groups.
* Do not pass in a crossfilter group as this will not work.
*
* Examples:
* - {@link http://europarl.me/dc.js/web/ep/index.html List of members of the european parliament}
* @class dataGrid
* @memberof dc
* @mixes dc.baseMixin
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.dataGrid}
*/
dc.dataGrid = function (parent, chartGroup) {
var LABEL_CSS_CLASS = 'dc-grid-label';
var ITEM_CSS_CLASS = 'dc-grid-item';
var GROUP_CSS_CLASS = 'dc-grid-group';
var GRID_CSS_CLASS = 'dc-grid-top';
var _chart = dc.baseMixin({});
var _size = 999; // shouldn't be needed, but you might
var _html = function (d) { return 'you need to provide an html() handling param: ' + JSON.stringify(d); };
var _sortBy = function (d) {
return d;
};
var _order = d3.ascending;
var _beginSlice = 0, _endSlice;
var _htmlGroup = function (d) {
return '<div class=\'' + GROUP_CSS_CLASS + '\'><h1 class=\'' + LABEL_CSS_CLASS + '\'>' +
_chart.keyAccessor()(d) + '</h1></div>';
};
_chart._doRender = function () {
_chart.selectAll('div.' + GRID_CSS_CLASS).remove();
renderItems(renderGroups());
return _chart;
};
function renderGroups () {
var groups = _chart.root().selectAll('div.' + GRID_CSS_CLASS)
.data(nestEntries(), function (d) {
return _chart.keyAccessor()(d);
});
var itemGroup = groups
.enter()
.append('div')
.attr('class', GRID_CSS_CLASS);
if (_htmlGroup) {
itemGroup
.html(function (d) {
return _htmlGroup(d);
});
}
groups.exit().remove();
return itemGroup;
}
function nestEntries () {
var entries = _chart.dimension().top(_size);
return d3.nest()
.key(_chart.group())
.sortKeys(_order)
.entries(entries.sort(function (a, b) {
return _order(_sortBy(a), _sortBy(b));
}).slice(_beginSlice, _endSlice));
}
function renderItems (groups) {
var items = groups.order()
.selectAll('div.' + ITEM_CSS_CLASS)
.data(function (d) {
return d.values;
});
items.enter()
.append('div')
.attr('class', ITEM_CSS_CLASS)
.html(function (d) {
return _html(d);
});
items.exit().remove();
return items;
}
_chart._doRedraw = function () {
return _chart._doRender();
};
/**
* Get or set the group function for the data grid. The group function takes a data row and
* returns the key to specify to {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_nest d3.nest}
* to split rows into groups.
*
* Do not pass in a crossfilter group as this will not work.
* @method group
* @memberof dc.dataGrid
* @instance
* @example
* // group rows by the value of their field
* chart
* .group(function(d) { return d.field; })
* @param {Function} groupFunction Function taking a row of data and returning the nest key.
* @returns {Function|dc.dataTable}
*/
/**
* Get or set the index of the beginning slice which determines which entries get displayed by the widget.
* Useful when implementing pagination.
* @method beginSlice
* @memberof dc.dataGrid
* @instance
* @param {Number} [beginSlice=0]
* @returns {Number|dc.dataGrid}
*/
_chart.beginSlice = function (beginSlice) {
if (!arguments.length) {
return _beginSlice;
}
_beginSlice = beginSlice;
return _chart;
};
/**
* Get or set the index of the end slice which determines which entries get displayed by the widget.
* Useful when implementing pagination.
* @method endSlice
* @memberof dc.dataGrid
* @instance
* @param {Number} [endSlice]
* @returns {Number|dc.dataGrid}
*/
_chart.endSlice = function (endSlice) {
if (!arguments.length) {
return _endSlice;
}
_endSlice = endSlice;
return _chart;
};
/**
* Get or set the grid size which determines the number of items displayed by the widget.
* @method size
* @memberof dc.dataGrid
* @instance
* @param {Number} [size=999]
* @returns {Number|dc.dataGrid}
*/
_chart.size = function (size) {
if (!arguments.length) {
return _size;
}
_size = size;
return _chart;
};
/**
* Get or set the function that formats an item. The data grid widget uses a
* function to generate dynamic html. Use your favourite templating engine or
* generate the string directly.
* @method html
* @memberof dc.dataGrid
* @instance
* @example
* chart.html(function (d) { return '<div class='item '+data.exampleCategory+''>'+data.exampleString+'</div>';});
* @param {Function} [html]
* @returns {Function|dc.dataGrid}
*/
_chart.html = function (html) {
if (!arguments.length) {
return _html;
}
_html = html;
return _chart;
};
/**
* Get or set the function that formats a group label.
* @method htmlGroup
* @memberof dc.dataGrid
* @instance
* @example
* chart.htmlGroup (function (d) { return '<h2>'.d.key . 'with ' . d.values.length .' items</h2>'});
* @param {Function} [htmlGroup]
* @returns {Function|dc.dataGrid}
*/
_chart.htmlGroup = function (htmlGroup) {
if (!arguments.length) {
return _htmlGroup;
}
_htmlGroup = htmlGroup;
return _chart;
};
/**
* Get or set sort-by function. This function works as a value accessor at the item
* level and returns a particular field to be sorted.
* @method sortBy
* @memberof dc.dataGrid
* @instance
* @example
* chart.sortBy(function(d) {
* return d.date;
* });
* @param {Function} [sortByFunction]
* @returns {Function|dc.dataGrid}
*/
_chart.sortBy = function (sortByFunction) {
if (!arguments.length) {
return _sortBy;
}
_sortBy = sortByFunction;
return _chart;
};
/**
* Get or set sort the order function.
* @method order
* @memberof dc.dataGrid
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_ascending d3.ascending}
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_descending d3.descending}
* @example
* chart.order(d3.descending);
* @param {Function} [order=d3.ascending]
* @returns {Function|dc.dataGrid}
*/
_chart.order = function (order) {
if (!arguments.length) {
return _order;
}
_order = order;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
* A concrete implementation of a general purpose bubble chart that allows data visualization using the
* following dimensions:
* - x axis position
* - y axis position
* - bubble radius
* - color
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
* - {@link http://dc-js.github.com/dc.js/vc/index.html US Venture Capital Landscape 2011}
* @class bubbleChart
* @memberof dc
* @mixes dc.bubbleMixin
* @mixes dc.coordinateGridMixin
* @example
* // create a bubble chart under #chart-container1 element using the default global chart group
* var bubbleChart1 = dc.bubbleChart('#chart-container1');
* // create a bubble chart under #chart-container2 element using chart group A
* var bubbleChart2 = dc.bubbleChart('#chart-container2', 'chartGroupA');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.bubbleChart}
*/
dc.bubbleChart = function (parent, chartGroup) {
var _chart = dc.bubbleMixin(dc.coordinateGridMixin({}));
_chart.transitionDuration(750);
_chart.transitionDelay(0);
var bubbleLocator = function (d) {
return 'translate(' + (bubbleX(d)) + ',' + (bubbleY(d)) + ')';
};
_chart.plotData = function () {
_chart.calculateRadiusDomain();
_chart.r().range([_chart.MIN_RADIUS, _chart.xAxisLength() * _chart.maxBubbleRelativeSize()]);
var data = _chart.data();
var bubbleG = _chart.chartBodyG().selectAll('g.' + _chart.BUBBLE_NODE_CLASS)
.data(data, function (d) { return d.key; });
if (_chart.sortBubbleSize()) {
// update dom order based on sort
bubbleG.order();
}
renderNodes(bubbleG);
updateNodes(bubbleG);
removeNodes(bubbleG);
_chart.fadeDeselectedArea();
};
function renderNodes (bubbleG) {
var bubbleGEnter = bubbleG.enter().append('g');
bubbleGEnter
.attr('class', _chart.BUBBLE_NODE_CLASS)
.attr('transform', bubbleLocator)
.append('circle').attr('class', function (d, i) {
return _chart.BUBBLE_CLASS + ' _' + i;
})
.on('click', _chart.onClick)
.attr('fill', _chart.getColor)
.attr('r', 0);
dc.transition(bubbleG, _chart.transitionDuration(), _chart.transitionDelay())
.select('circle.' + _chart.BUBBLE_CLASS)
.attr('r', function (d) {
return _chart.bubbleR(d);
})
.attr('opacity', function (d) {
return (_chart.bubbleR(d) > 0) ? 1 : 0;
});
_chart._doRenderLabel(bubbleGEnter);
_chart._doRenderTitles(bubbleGEnter);
}
function updateNodes (bubbleG) {
dc.transition(bubbleG, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', bubbleLocator)
.select('circle.' + _chart.BUBBLE_CLASS)
.attr('fill', _chart.getColor)
.attr('r', function (d) {
return _chart.bubbleR(d);
})
.attr('opacity', function (d) {
return (_chart.bubbleR(d) > 0) ? 1 : 0;
});
_chart.doUpdateLabels(bubbleG);
_chart.doUpdateTitles(bubbleG);
}
function removeNodes (bubbleG) {
bubbleG.exit().remove();
}
function bubbleX (d) {
var x = _chart.x()(_chart.keyAccessor()(d));
if (isNaN(x)) {
x = 0;
}
return x;
}
function bubbleY (d) {
var y = _chart.y()(_chart.valueAccessor()(d));
if (isNaN(y)) {
y = 0;
}
return y;
}
_chart.renderBrush = function () {
// override default x axis brush from parent chart
};
_chart.redrawBrush = function () {
// override default x axis brush from parent chart
_chart.fadeDeselectedArea();
};
return _chart.anchor(parent, chartGroup);
};
/**
* Composite charts are a special kind of chart that render multiple charts on the same Coordinate
* Grid. You can overlay (compose) different bar/line/area charts in a single composite chart to
* achieve some quite flexible charting effects.
* @class compositeChart
* @memberof dc
* @mixes dc.coordinateGridMixin
* @example
* // create a composite chart under #chart-container1 element using the default global chart group
* var compositeChart1 = dc.compositeChart('#chart-container1');
* // create a composite chart under #chart-container2 element using chart group A
* var compositeChart2 = dc.compositeChart('#chart-container2', 'chartGroupA');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.compositeChart}
*/
dc.compositeChart = function (parent, chartGroup) {
var SUB_CHART_CLASS = 'sub';
var DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING = 12;
var _chart = dc.coordinateGridMixin({});
var _children = [];
var _childOptions = {};
var _shareColors = false,
_shareTitle = true,
_alignYAxes = false;
var _rightYAxis = d3.svg.axis(),
_rightYAxisLabel = 0,
_rightYAxisLabelPadding = DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING,
_rightY,
_rightAxisGridLines = false;
_chart._mandatoryAttributes([]);
_chart.transitionDuration(500);
_chart.transitionDelay(0);
dc.override(_chart, '_generateG', function () {
var g = this.__generateG();
for (var i = 0; i < _children.length; ++i) {
var child = _children[i];
generateChildG(child, i);
if (!child.dimension()) {
child.dimension(_chart.dimension());
}
if (!child.group()) {
child.group(_chart.group());
}
child.chartGroup(_chart.chartGroup());
child.svg(_chart.svg());
child.xUnits(_chart.xUnits());
child.transitionDuration(_chart.transitionDuration(), _chart.transitionDelay());
child.brushOn(_chart.brushOn());
child.renderTitle(_chart.renderTitle());
child.elasticX(_chart.elasticX());
}
return g;
});
_chart._brushing = function () {
var extent = _chart.extendBrush();
var brushIsEmpty = _chart.brushIsEmpty(extent);
for (var i = 0; i < _children.length; ++i) {
_children[i].replaceFilter(brushIsEmpty ? null : extent);
}
};
_chart._prepareYAxis = function () {
var left = (leftYAxisChildren().length !== 0);
var right = (rightYAxisChildren().length !== 0);
var ranges = calculateYAxisRanges(left, right);
if (left) { prepareLeftYAxis(ranges); }
if (right) { prepareRightYAxis(ranges); }
if (leftYAxisChildren().length > 0 && !_rightAxisGridLines) {
_chart._renderHorizontalGridLinesForAxis(_chart.g(), _chart.y(), _chart.yAxis());
} else if (rightYAxisChildren().length > 0) {
_chart._renderHorizontalGridLinesForAxis(_chart.g(), _rightY, _rightYAxis);
}
};
_chart.renderYAxis = function () {
if (leftYAxisChildren().length !== 0) {
_chart.renderYAxisAt('y', _chart.yAxis(), _chart.margins().left);
_chart.renderYAxisLabel('y', _chart.yAxisLabel(), -90);
}
if (rightYAxisChildren().length !== 0) {
_chart.renderYAxisAt('yr', _chart.rightYAxis(), _chart.width() - _chart.margins().right);
_chart.renderYAxisLabel('yr', _chart.rightYAxisLabel(), 90, _chart.width() - _rightYAxisLabelPadding);
}
};
function calculateYAxisRanges (left, right) {
var lyAxisMin, lyAxisMax, ryAxisMin, ryAxisMax;
var ranges;
if (left) {
lyAxisMin = yAxisMin();
lyAxisMax = yAxisMax();
}
if (right) {
ryAxisMin = rightYAxisMin();
ryAxisMax = rightYAxisMax();
}
if (_chart.alignYAxes() && left && right) {
ranges = alignYAxisRanges(lyAxisMin, lyAxisMax, ryAxisMin, ryAxisMax);
}
return ranges || {
lyAxisMin: lyAxisMin,
lyAxisMax: lyAxisMax,
ryAxisMin: ryAxisMin,
ryAxisMax: ryAxisMax
};
}
function alignYAxisRanges (lyAxisMin, lyAxisMax, ryAxisMin, ryAxisMax) {
// since the two series will share a zero, each Y is just a multiple
// of the other. and the ratio should be the ratio of the ranges of the
// input data, so that they come out the same height. so we just min/max
// note: both ranges already include zero due to the stack mixin (#667)
// if #667 changes, we can reconsider whether we want data height or
// height from zero to be equal. and it will be possible for the axes
// to be aligned but not visible.
var extentRatio = (ryAxisMax - ryAxisMin) / (lyAxisMax - lyAxisMin);
return {
lyAxisMin: Math.min(lyAxisMin, ryAxisMin / extentRatio),
lyAxisMax: Math.max(lyAxisMax, ryAxisMax / extentRatio),
ryAxisMin: Math.min(ryAxisMin, lyAxisMin * extentRatio),
ryAxisMax: Math.max(ryAxisMax, lyAxisMax * extentRatio)
};
}
function prepareRightYAxis (ranges) {
var needDomain = _chart.rightY() === undefined || _chart.elasticY(),
needRange = needDomain || _chart.resizing();
if (_chart.rightY() === undefined) {
_chart.rightY(d3.scale.linear());
}
if (needDomain) {
_chart.rightY().domain([ranges.ryAxisMin, ranges.ryAxisMax]);
}
if (needRange) {
_chart.rightY().rangeRound([_chart.yAxisHeight(), 0]);
}
_chart.rightY().range([_chart.yAxisHeight(), 0]);
_chart.rightYAxis(_chart.rightYAxis().scale(_chart.rightY()));
_chart.rightYAxis().orient('right');
}
function prepareLeftYAxis (ranges) {
var needDomain = _chart.y() === undefined || _chart.elasticY(),
needRange = needDomain || _chart.resizing();
if (_chart.y() === undefined) {
_chart.y(d3.scale.linear());
}
if (needDomain) {
_chart.y().domain([ranges.lyAxisMin, ranges.lyAxisMax]);
}
if (needRange) {
_chart.y().rangeRound([_chart.yAxisHeight(), 0]);
}
_chart.y().range([_chart.yAxisHeight(), 0]);
_chart.yAxis(_chart.yAxis().scale(_chart.y()));
_chart.yAxis().orient('left');
}
function generateChildG (child, i) {
child._generateG(_chart.g());
child.g().attr('class', SUB_CHART_CLASS + ' _' + i);
}
_chart.plotData = function () {
for (var i = 0; i < _children.length; ++i) {
var child = _children[i];
if (!child.g()) {
generateChildG(child, i);
}
if (_shareColors) {
child.colors(_chart.colors());
}
child.x(_chart.x());
child.xAxis(_chart.xAxis());
if (child.useRightYAxis()) {
child.y(_chart.rightY());
child.yAxis(_chart.rightYAxis());
} else {
child.y(_chart.y());
child.yAxis(_chart.yAxis());
}
child.plotData();
child._activateRenderlets();
}
};
/**
* Get or set whether to draw gridlines from the right y axis. Drawing from the left y axis is the
* default behavior. This option is only respected when subcharts with both left and right y-axes
* are present.
* @method useRightAxisGridLines
* @memberof dc.compositeChart
* @instance
* @param {Boolean} [useRightAxisGridLines=false]
* @returns {Boolean|dc.compositeChart}
*/
_chart.useRightAxisGridLines = function (useRightAxisGridLines) {
if (!arguments) {
return _rightAxisGridLines;
}
_rightAxisGridLines = useRightAxisGridLines;
return _chart;
};
/**
* Get or set chart-specific options for all child charts. This is equivalent to calling
* {@link dc.baseMixin#options .options} on each child chart.
* @method childOptions
* @memberof dc.compositeChart
* @instance
* @param {Object} [childOptions]
* @returns {Object|dc.compositeChart}
*/
_chart.childOptions = function (childOptions) {
if (!arguments.length) {
return _childOptions;
}
_childOptions = childOptions;
_children.forEach(function (child) {
child.options(_childOptions);
});
return _chart;
};
_chart.fadeDeselectedArea = function () {
for (var i = 0; i < _children.length; ++i) {
var child = _children[i];
child.brush(_chart.brush());
child.fadeDeselectedArea();
}
};
/**
* Set or get the right y axis label.
* @method rightYAxisLabel
* @memberof dc.compositeChart
* @instance
* @param {String} [rightYAxisLabel]
* @param {Number} [padding]
* @returns {String|dc.compositeChart}
*/
_chart.rightYAxisLabel = function (rightYAxisLabel, padding) {
if (!arguments.length) {
return _rightYAxisLabel;
}
_rightYAxisLabel = rightYAxisLabel;
_chart.margins().right -= _rightYAxisLabelPadding;
_rightYAxisLabelPadding = (padding === undefined) ? DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING : padding;
_chart.margins().right += _rightYAxisLabelPadding;
return _chart;
};
/**
* Combine the given charts into one single composite coordinate grid chart.
* @method compose
* @memberof dc.compositeChart
* @instance
* @example
* moveChart.compose([
* // when creating sub-chart you need to pass in the parent chart
* dc.lineChart(moveChart)
* .group(indexAvgByMonthGroup) // if group is missing then parent's group will be used
* .valueAccessor(function (d){return d.value.avg;})
* // most of the normal functions will continue to work in a composed chart
* .renderArea(true)
* .stack(monthlyMoveGroup, function (d){return d.value;})
* .title(function (d){
* var value = d.value.avg?d.value.avg:d.value;
* if(isNaN(value)) value = 0;
* return dateFormat(d.key) + '\n' + numberFormat(value);
* }),
* dc.barChart(moveChart)
* .group(volumeByMonthGroup)
* .centerBar(true)
* ]);
* @param {Array<Chart>} [subChartArray]
* @returns {dc.compositeChart}
*/
_chart.compose = function (subChartArray) {
_children = subChartArray;
_children.forEach(function (child) {
child.height(_chart.height());
child.width(_chart.width());
child.margins(_chart.margins());
if (_shareTitle) {
child.title(_chart.title());
}
child.options(_childOptions);
});
return _chart;
};
/**
* Returns the child charts which are composed into the composite chart.
* @method children
* @memberof dc.compositeChart
* @instance
* @returns {Array<dc.baseMixin>}
*/
_chart.children = function () {
return _children;
};
/**
* Get or set color sharing for the chart. If set, the {@link dc.colorMixin#colors .colors()} value from this chart
* will be shared with composed children. Additionally if the child chart implements
* Stackable and has not set a custom .colorAccessor, then it will generate a color
* specific to its order in the composition.
* @method shareColors
* @memberof dc.compositeChart
* @instance
* @param {Boolean} [shareColors=false]
* @returns {Boolean|dc.compositeChart}
*/
_chart.shareColors = function (shareColors) {
if (!arguments.length) {
return _shareColors;
}
_shareColors = shareColors;
return _chart;
};
/**
* Get or set title sharing for the chart. If set, the {@link dc.baseMixin#title .title()} value from
* this chart will be shared with composed children.
* @method shareTitle
* @memberof dc.compositeChart
* @instance
* @param {Boolean} [shareTitle=true]
* @returns {Boolean|dc.compositeChart}
*/
_chart.shareTitle = function (shareTitle) {
if (!arguments.length) {
return _shareTitle;
}
_shareTitle = shareTitle;
return _chart;
};
/**
* Get or set the y scale for the right axis. The right y scale is typically automatically
* generated by the chart implementation.
* @method rightY
* @memberof dc.compositeChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Scales.md d3.scale}
* @param {d3.scale} [yScale]
* @returns {d3.scale|dc.compositeChart}
*/
_chart.rightY = function (yScale) {
if (!arguments.length) {
return _rightY;
}
_rightY = yScale;
_chart.rescale();
return _chart;
};
/**
* Get or set alignment between left and right y axes. A line connecting '0' on both y axis
* will be parallel to x axis. This only has effect when {@link #dc.coordinateGridMixin+elasticY elasticY} is true.
* @method alignYAxes
* @memberof dc.compositeChart
* @instance
* @param {Boolean} [alignYAxes=false]
* @returns {Chart}
*/
_chart.alignYAxes = function (alignYAxes) {
if (!arguments.length) {
return _alignYAxes;
}
_alignYAxes = alignYAxes;
_chart.rescale();
return _chart;
};
function leftYAxisChildren () {
return _children.filter(function (child) {
return !child.useRightYAxis();
});
}
function rightYAxisChildren () {
return _children.filter(function (child) {
return child.useRightYAxis();
});
}
function getYAxisMin (charts) {
return charts.map(function (c) {
return c.yAxisMin();
});
}
delete _chart.yAxisMin;
function yAxisMin () {
return d3.min(getYAxisMin(leftYAxisChildren()));
}
function rightYAxisMin () {
return d3.min(getYAxisMin(rightYAxisChildren()));
}
function getYAxisMax (charts) {
return charts.map(function (c) {
return c.yAxisMax();
});
}
delete _chart.yAxisMax;
function yAxisMax () {
return dc.utils.add(d3.max(getYAxisMax(leftYAxisChildren())), _chart.yAxisPadding());
}
function rightYAxisMax () {
return dc.utils.add(d3.max(getYAxisMax(rightYAxisChildren())), _chart.yAxisPadding());
}
function getAllXAxisMinFromChildCharts () {
return _children.map(function (c) {
return c.xAxisMin();
});
}
dc.override(_chart, 'xAxisMin', function () {
return dc.utils.subtract(d3.min(getAllXAxisMinFromChildCharts()), _chart.xAxisPadding());
});
function getAllXAxisMaxFromChildCharts () {
return _children.map(function (c) {
return c.xAxisMax();
});
}
dc.override(_chart, 'xAxisMax', function () {
return dc.utils.add(d3.max(getAllXAxisMaxFromChildCharts()), _chart.xAxisPadding());
});
_chart.legendables = function () {
return _children.reduce(function (items, child) {
if (_shareColors) {
child.colors(_chart.colors());
}
items.push.apply(items, child.legendables());
return items;
}, []);
};
_chart.legendHighlight = function (d) {
for (var j = 0; j < _children.length; ++j) {
var child = _children[j];
child.legendHighlight(d);
}
};
_chart.legendReset = function (d) {
for (var j = 0; j < _children.length; ++j) {
var child = _children[j];
child.legendReset(d);
}
};
_chart.legendToggle = function () {
console.log('composite should not be getting legendToggle itself');
};
/**
* Set or get the right y axis used by the composite chart. This function is most useful when y
* axis customization is required. The y axis in dc.js is an instance of a [d3 axis
* object](https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#axis) therefore it supports any valid
* d3 axis manipulation.
*
* **Caution**: The y axis is usually generated internally by dc; resetting it may cause
* unexpected results.
* @method rightYAxis
* @memberof dc.compositeChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#axis d3.svg.axis}
* @example
* // customize y axis tick format
* chart.rightYAxis().tickFormat(function (v) {return v + '%';});
* // customize y axis tick values
* chart.rightYAxis().tickValues([0, 100, 200, 300]);
* @param {d3.svg.axis} [rightYAxis]
* @returns {d3.svg.axis|dc.compositeChart}
*/
_chart.rightYAxis = function (rightYAxis) {
if (!arguments.length) {
return _rightYAxis;
}
_rightYAxis = rightYAxis;
return _chart;
};
/* patched as suggested at: https://github.com/ruhley/dc.js/commit/2512ba8c29494ad3cac50fddefcb5fa6b51c7a3a.
*
* This fix dc.filterAll() and dc.redrawAll() failure when composite charts are used.
*/
dc.override(_chart, 'filterAll', function () {
var g = this._filterAll();
for (var i = 0; i < _children.length; ++i) {
var child = _children[i];
child.filterAll();
}
return g;
});
return _chart.anchor(parent, chartGroup);
};
/**
* A series chart is a chart that shows multiple series of data overlaid on one chart, where the
* series is specified in the data. It is a specialization of Composite Chart and inherits all
* composite features other than recomposing the chart.
*
* Examples:
* - {@link http://dc-js.github.io/dc.js/examples/series.html Series Chart}
* @class seriesChart
* @memberof dc
* @mixes dc.compositeChart
* @example
* // create a series chart under #chart-container1 element using the default global chart group
* var seriesChart1 = dc.seriesChart("#chart-container1");
* // create a series chart under #chart-container2 element using chart group A
* var seriesChart2 = dc.seriesChart("#chart-container2", "chartGroupA");
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.seriesChart}
*/
dc.seriesChart = function (parent, chartGroup) {
var _chart = dc.compositeChart(parent, chartGroup);
function keySort (a, b) {
return d3.ascending(_chart.keyAccessor()(a), _chart.keyAccessor()(b));
}
var _charts = {};
var _chartFunction = dc.lineChart;
var _seriesAccessor;
var _seriesSort = d3.ascending;
var _valueSort = keySort;
_chart._mandatoryAttributes().push('seriesAccessor', 'chart');
_chart.shareColors(true);
_chart._preprocessData = function () {
var keep = [];
var childrenChanged;
var nester = d3.nest().key(_seriesAccessor);
if (_seriesSort) {
nester.sortKeys(_seriesSort);
}
if (_valueSort) {
nester.sortValues(_valueSort);
}
var nesting = nester.entries(_chart.data());
var children =
nesting.map(function (sub, i) {
var subChart = _charts[sub.key] || _chartFunction.call(_chart, _chart, chartGroup, sub.key, i);
if (!_charts[sub.key]) {
childrenChanged = true;
}
_charts[sub.key] = subChart;
keep.push(sub.key);
return subChart
.dimension(_chart.dimension())
.group({all: d3.functor(sub.values)}, sub.key)
.keyAccessor(_chart.keyAccessor())
.valueAccessor(_chart.valueAccessor())
.brushOn(_chart.brushOn());
});
// this works around the fact compositeChart doesn't really
// have a removal interface
Object.keys(_charts)
.filter(function (c) {return keep.indexOf(c) === -1;})
.forEach(function (c) {
clearChart(c);
childrenChanged = true;
});
_chart._compose(children);
if (childrenChanged && _chart.legend()) {
_chart.legend().render();
}
};
function clearChart (c) {
if (_charts[c].g()) {
_charts[c].g().remove();
}
delete _charts[c];
}
function resetChildren () {
Object.keys(_charts).map(clearChart);
_charts = {};
}
/**
* Get or set the chart function, which generates the child charts.
* @method chart
* @memberof dc.seriesChart
* @instance
* @example
* // put interpolation on the line charts used for the series
* chart.chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
* // do a scatter series chart
* chart.chart(dc.scatterPlot)
* @param {Function} [chartFunction=dc.lineChart]
* @returns {Function|dc.seriesChart}
*/
_chart.chart = function (chartFunction) {
if (!arguments.length) {
return _chartFunction;
}
_chartFunction = chartFunction;
resetChildren();
return _chart;
};
/**
* **mandatory**
*
* Get or set accessor function for the displayed series. Given a datum, this function
* should return the series that datum belongs to.
* @method seriesAccessor
* @memberof dc.seriesChart
* @instance
* @example
* // simple series accessor
* chart.seriesAccessor(function(d) { return "Expt: " + d.key[0]; })
* @param {Function} [accessor]
* @returns {Function|dc.seriesChart}
*/
_chart.seriesAccessor = function (accessor) {
if (!arguments.length) {
return _seriesAccessor;
}
_seriesAccessor = accessor;
resetChildren();
return _chart;
};
/**
* Get or set a function to sort the list of series by, given series values.
* @method seriesSort
* @memberof dc.seriesChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_ascending d3.ascending}
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_descending d3.descending}
* @example
* chart.seriesSort(d3.descending);
* @param {Function} [sortFunction=d3.ascending]
* @returns {Function|dc.seriesChart}
*/
_chart.seriesSort = function (sortFunction) {
if (!arguments.length) {
return _seriesSort;
}
_seriesSort = sortFunction;
resetChildren();
return _chart;
};
/**
* Get or set a function to sort each series values by. By default this is the key accessor which,
* for example, will ensure a lineChart series connects its points in increasing key/x order,
* rather than haphazardly.
* @method valueSort
* @memberof dc.seriesChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_ascending d3.ascending}
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Arrays.md#d3_descending d3.descending}
* @example
* // Default value sort
* _chart.valueSort(function keySort (a, b) {
* return d3.ascending(_chart.keyAccessor()(a), _chart.keyAccessor()(b));
* });
* @param {Function} [sortFunction]
* @returns {Function|dc.seriesChart}
*/
_chart.valueSort = function (sortFunction) {
if (!arguments.length) {
return _valueSort;
}
_valueSort = sortFunction;
resetChildren();
return _chart;
};
// make compose private
_chart._compose = _chart.compose;
delete _chart.compose;
return _chart;
};
/**
* The geo choropleth chart is designed as an easy way to create a crossfilter driven choropleth map
* from GeoJson data. This chart implementation was inspired by
* {@link http://bl.ocks.org/4060606 the great d3 choropleth example}.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/vc/index.html US Venture Capital Landscape 2011}
* @class geoChoroplethChart
* @memberof dc
* @mixes dc.colorMixin
* @mixes dc.baseMixin
* @example
* // create a choropleth chart under '#us-chart' element using the default global chart group
* var chart1 = dc.geoChoroplethChart('#us-chart');
* // create a choropleth chart under '#us-chart2' element using chart group A
* var chart2 = dc.compositeChart('#us-chart2', 'chartGroupA');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.geoChoroplethChart}
*/
dc.geoChoroplethChart = function (parent, chartGroup) {
var _chart = dc.colorMixin(dc.baseMixin({}));
_chart.colorAccessor(function (d) {
return d || 0;
});
var _geoPath = d3.geo.path();
var _projectionFlag;
var _geoJsons = [];
_chart._doRender = function () {
_chart.resetSvg();
for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
var states = _chart.svg().append('g')
.attr('class', 'layer' + layerIndex);
var regionG = states.selectAll('g.' + geoJson(layerIndex).name)
.data(geoJson(layerIndex).data)
.enter()
.append('g')
.attr('class', geoJson(layerIndex).name);
regionG
.append('path')
.attr('fill', 'white')
.attr('d', _geoPath);
regionG.append('title');
plotData(layerIndex);
}
_projectionFlag = false;
};
function plotData (layerIndex) {
var data = generateLayeredData();
if (isDataLayer(layerIndex)) {
var regionG = renderRegionG(layerIndex);
renderPaths(regionG, layerIndex, data);
renderTitle(regionG, layerIndex, data);
}
}
function generateLayeredData () {
var data = {};
var groupAll = _chart.data();
for (var i = 0; i < groupAll.length; ++i) {
data[_chart.keyAccessor()(groupAll[i])] = _chart.valueAccessor()(groupAll[i]);
}
return data;
}
function isDataLayer (layerIndex) {
return geoJson(layerIndex).keyAccessor;
}
function renderRegionG (layerIndex) {
var regionG = _chart.svg()
.selectAll(layerSelector(layerIndex))
.classed('selected', function (d) {
return isSelected(layerIndex, d);
})
.classed('deselected', function (d) {
return isDeselected(layerIndex, d);
})
.attr('class', function (d) {
var layerNameClass = geoJson(layerIndex).name;
var regionClass = dc.utils.nameToId(geoJson(layerIndex).keyAccessor(d));
var baseClasses = layerNameClass + ' ' + regionClass;
if (isSelected(layerIndex, d)) {
baseClasses += ' selected';
}
if (isDeselected(layerIndex, d)) {
baseClasses += ' deselected';
}
return baseClasses;
});
return regionG;
}
function layerSelector (layerIndex) {
return 'g.layer' + layerIndex + ' g.' + geoJson(layerIndex).name;
}
function isSelected (layerIndex, d) {
return _chart.hasFilter() && _chart.hasFilter(getKey(layerIndex, d));
}
function isDeselected (layerIndex, d) {
return _chart.hasFilter() && !_chart.hasFilter(getKey(layerIndex, d));
}
function getKey (layerIndex, d) {
return geoJson(layerIndex).keyAccessor(d);
}
function geoJson (index) {
return _geoJsons[index];
}
function renderPaths (regionG, layerIndex, data) {
var paths = regionG
.select('path')
.attr('fill', function () {
var currentFill = d3.select(this).attr('fill');
if (currentFill) {
return currentFill;
}
return 'none';
})
.on('click', function (d) {
return _chart.onClick(d, layerIndex);
});
dc.transition(paths, _chart.transitionDuration(), _chart.transitionDelay()).attr('fill', function (d, i) {
return _chart.getColor(data[geoJson(layerIndex).keyAccessor(d)], i);
});
}
_chart.onClick = function (d, layerIndex) {
var selectedRegion = geoJson(layerIndex).keyAccessor(d);
dc.events.trigger(function () {
_chart.filter(selectedRegion);
_chart.redrawGroup();
});
};
function renderTitle (regionG, layerIndex, data) {
if (_chart.renderTitle()) {
regionG.selectAll('title').text(function (d) {
var key = getKey(layerIndex, d);
var value = data[key];
return _chart.title()({key: key, value: value});
});
}
}
_chart._doRedraw = function () {
for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
plotData(layerIndex);
if (_projectionFlag) {
_chart.svg().selectAll('g.' + geoJson(layerIndex).name + ' path').attr('d', _geoPath);
}
}
_projectionFlag = false;
};
/**
* **mandatory**
*
* Use this function to insert a new GeoJson map layer. This function can be invoked multiple times
* if you have multiple GeoJson data layers to render on top of each other. If you overlay multiple
* layers with the same name the new overlay will override the existing one.
* @method overlayGeoJson
* @memberof dc.geoChoroplethChart
* @instance
* @see {@link http://geojson.org/ GeoJSON}
* @see {@link https://github.com/topojson/topojson/wiki TopoJSON}
* @see {@link https://github.com/topojson/topojson-1.x-api-reference/blob/master/API-Reference.md#wiki-feature topojson.feature}
* @example
* // insert a layer for rendering US states
* chart.overlayGeoJson(statesJson.features, 'state', function(d) {
* return d.properties.name;
* });
* @param {geoJson} json - a geojson feed
* @param {String} name - name of the layer
* @param {Function} keyAccessor - accessor function used to extract 'key' from the GeoJson data. The key extracted by
* this function should match the keys returned by the crossfilter groups.
* @returns {dc.geoChoroplethChart}
*/
_chart.overlayGeoJson = function (json, name, keyAccessor) {
for (var i = 0; i < _geoJsons.length; ++i) {
if (_geoJsons[i].name === name) {
_geoJsons[i].data = json;
_geoJsons[i].keyAccessor = keyAccessor;
return _chart;
}
}
_geoJsons.push({name: name, data: json, keyAccessor: keyAccessor});
return _chart;
};
/**
* Set custom geo projection function. See the available
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Projections.md d3 geo projection functions}.
* @method projection
* @memberof dc.geoChoroplethChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Projections.md d3.geo.projection}
* @see {@link https://github.com/d3/d3-geo-projection Extended d3.geo.projection}
* @param {d3.projection} [projection=d3.geo.albersUsa()]
* @returns {dc.geoChoroplethChart}
*/
_chart.projection = function (projection) {
_geoPath.projection(projection);
_projectionFlag = true;
return _chart;
};
/**
* Returns all GeoJson layers currently registered with this chart. The returned array is a
* reference to this chart's internal data structure, so any modification to this array will also
* modify this chart's internal registration.
* @method geoJsons
* @memberof dc.geoChoroplethChart
* @instance
* @returns {Array<{name:String, data: Object, accessor: Function}>}
*/
_chart.geoJsons = function () {
return _geoJsons;
};
/**
* Returns the {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Paths.md#path d3.geo.path} object used to
* render the projection and features. Can be useful for figuring out the bounding box of the
* feature set and thus a way to calculate scale and translation for the projection.
* @method geoPath
* @memberof dc.geoChoroplethChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Paths.md#path d3.geo.path}
* @returns {d3.geo.path}
*/
_chart.geoPath = function () {
return _geoPath;
};
/**
* Remove a GeoJson layer from this chart by name
* @method removeGeoJson
* @memberof dc.geoChoroplethChart
* @instance
* @param {String} name
* @returns {dc.geoChoroplethChart}
*/
_chart.removeGeoJson = function (name) {
var geoJsons = [];
for (var i = 0; i < _geoJsons.length; ++i) {
var layer = _geoJsons[i];
if (layer.name !== name) {
geoJsons.push(layer);
}
}
_geoJsons = geoJsons;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
* The bubble overlay chart is quite different from the typical bubble chart. With the bubble overlay
* chart you can arbitrarily place bubbles on an existing svg or bitmap image, thus changing the
* typical x and y positioning while retaining the capability to visualize data using bubble radius
* and coloring.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/crime/index.html Canadian City Crime Stats}
* @class bubbleOverlay
* @memberof dc
* @mixes dc.bubbleMixin
* @mixes dc.baseMixin
* @example
* // create a bubble overlay chart on top of the '#chart-container1 svg' element using the default global chart group
* var bubbleChart1 = dc.bubbleOverlayChart('#chart-container1').svg(d3.select('#chart-container1 svg'));
* // create a bubble overlay chart on top of the '#chart-container2 svg' element using chart group A
* var bubbleChart2 = dc.compositeChart('#chart-container2', 'chartGroupA').svg(d3.select('#chart-container2 svg'));
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.bubbleOverlay}
*/
dc.bubbleOverlay = function (parent, chartGroup) {
var BUBBLE_OVERLAY_CLASS = 'bubble-overlay';
var BUBBLE_NODE_CLASS = 'node';
var BUBBLE_CLASS = 'bubble';
/**
* **mandatory**
*
* Set the underlying svg image element. Unlike other dc charts this chart will not generate a svg
* element; therefore the bubble overlay chart will not work if this function is not invoked. If the
* underlying image is a bitmap, then an empty svg will need to be created on top of the image.
* @method svg
* @memberof dc.bubbleOverlay
* @instance
* @example
* // set up underlying svg element
* chart.svg(d3.select('#chart svg'));
* @param {SVGElement|d3.selection} [imageElement]
* @returns {dc.bubbleOverlay}
*/
var _chart = dc.bubbleMixin(dc.baseMixin({}));
var _g;
var _points = [];
_chart.transitionDuration(750);
_chart.transitionDelay(0);
_chart.radiusValueAccessor(function (d) {
return d.value;
});
/**
* **mandatory**
*
* Set up a data point on the overlay. The name of a data point should match a specific 'key' among
* data groups generated using keyAccessor. If a match is found (point name <-> data group key)
* then a bubble will be generated at the position specified by the function. x and y
* value specified here are relative to the underlying svg.
* @method point
* @memberof dc.bubbleOverlay
* @instance
* @param {String} name
* @param {Number} x
* @param {Number} y
* @returns {dc.bubbleOverlay}
*/
_chart.point = function (name, x, y) {
_points.push({name: name, x: x, y: y});
return _chart;
};
_chart._doRender = function () {
_g = initOverlayG();
_chart.r().range([_chart.MIN_RADIUS, _chart.width() * _chart.maxBubbleRelativeSize()]);
initializeBubbles();
_chart.fadeDeselectedArea();
return _chart;
};
function initOverlayG () {
_g = _chart.select('g.' + BUBBLE_OVERLAY_CLASS);
if (_g.empty()) {
_g = _chart.svg().append('g').attr('class', BUBBLE_OVERLAY_CLASS);
}
return _g;
}
function initializeBubbles () {
var data = mapData();
_chart.calculateRadiusDomain();
_points.forEach(function (point) {
var nodeG = getNodeG(point, data);
var circle = nodeG.select('circle.' + BUBBLE_CLASS);
if (circle.empty()) {
circle = nodeG.append('circle')
.attr('class', BUBBLE_CLASS)
.attr('r', 0)
.attr('fill', _chart.getColor)
.on('click', _chart.onClick);
}
dc.transition(circle, _chart.transitionDuration(), _chart.transitionDelay())
.attr('r', function (d) {
return _chart.bubbleR(d);
});
_chart._doRenderLabel(nodeG);
_chart._doRenderTitles(nodeG);
});
}
function mapData () {
var data = {};
_chart.data().forEach(function (datum) {
data[_chart.keyAccessor()(datum)] = datum;
});
return data;
}
function getNodeG (point, data) {
var bubbleNodeClass = BUBBLE_NODE_CLASS + ' ' + dc.utils.nameToId(point.name);
var nodeG = _g.select('g.' + dc.utils.nameToId(point.name));
if (nodeG.empty()) {
nodeG = _g.append('g')
.attr('class', bubbleNodeClass)
.attr('transform', 'translate(' + point.x + ',' + point.y + ')');
}
nodeG.datum(data[point.name]);
return nodeG;
}
_chart._doRedraw = function () {
updateBubbles();
_chart.fadeDeselectedArea();
return _chart;
};
function updateBubbles () {
var data = mapData();
_chart.calculateRadiusDomain();
_points.forEach(function (point) {
var nodeG = getNodeG(point, data);
var circle = nodeG.select('circle.' + BUBBLE_CLASS);
dc.transition(circle, _chart.transitionDuration(), _chart.transitionDelay())
.attr('r', function (d) {
return _chart.bubbleR(d);
})
.attr('fill', _chart.getColor);
_chart.doUpdateLabels(nodeG);
_chart.doUpdateTitles(nodeG);
});
}
_chart.debug = function (flag) {
if (flag) {
var debugG = _chart.select('g.' + dc.constants.DEBUG_GROUP_CLASS);
if (debugG.empty()) {
debugG = _chart.svg()
.append('g')
.attr('class', dc.constants.DEBUG_GROUP_CLASS);
}
var debugText = debugG.append('text')
.attr('x', 10)
.attr('y', 20);
debugG
.append('rect')
.attr('width', _chart.width())
.attr('height', _chart.height())
.on('mousemove', function () {
var position = d3.mouse(debugG.node());
var msg = position[0] + ', ' + position[1];
debugText.text(msg);
});
} else {
_chart.selectAll('.debug').remove();
}
return _chart;
};
_chart.anchor(parent, chartGroup);
return _chart;
};
/**
* Concrete row chart implementation.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
* @class rowChart
* @memberof dc
* @mixes dc.capMixin
* @mixes dc.marginMixin
* @mixes dc.colorMixin
* @mixes dc.baseMixin
* @example
* // create a row chart under #chart-container1 element using the default global chart group
* var chart1 = dc.rowChart('#chart-container1');
* // create a row chart under #chart-container2 element using chart group A
* var chart2 = dc.rowChart('#chart-container2', 'chartGroupA');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.rowChart}
*/
dc.rowChart = function (parent, chartGroup) {
var _g;
var _labelOffsetX = 10;
var _labelOffsetY = 15;
var _hasLabelOffsetY = false;
var _dyOffset = '0.35em'; // this helps center labels https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#svg_text
var _titleLabelOffsetX = 2;
var _gap = 5;
var _fixedBarHeight = false;
var _rowCssClass = 'row';
var _titleRowCssClass = 'titlerow';
var _renderTitleLabel = false;
var _chart = dc.capMixin(dc.marginMixin(dc.colorMixin(dc.baseMixin({}))));
var _x;
var _elasticX;
var _xAxis = d3.svg.axis().orient('bottom');
var _rowData;
_chart.rowsCap = _chart.cap;
function calculateAxisScale () {
if (!_x || _elasticX) {
var extent = d3.extent(_rowData, _chart.cappedValueAccessor);
if (extent[0] > 0) {
extent[0] = 0;
}
if (extent[1] < 0) {
extent[1] = 0;
}
_x = d3.scale.linear().domain(extent)
.range([0, _chart.effectiveWidth()]);
}
_xAxis.scale(_x);
}
function drawAxis () {
var axisG = _g.select('g.axis');
calculateAxisScale();
if (axisG.empty()) {
axisG = _g.append('g').attr('class', 'axis');
}
axisG.attr('transform', 'translate(0, ' + _chart.effectiveHeight() + ')');
dc.transition(axisG, _chart.transitionDuration(), _chart.transitionDelay())
.call(_xAxis);
}
_chart._doRender = function () {
_chart.resetSvg();
_g = _chart.svg()
.append('g')
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
drawChart();
return _chart;
};
_chart.title(function (d) {
return _chart.cappedKeyAccessor(d) + ': ' + _chart.cappedValueAccessor(d);
});
_chart.label(_chart.cappedKeyAccessor);
/**
* Gets or sets the x scale. The x scale can be any d3
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md quantitive scale}.
* @method x
* @memberof dc.rowChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md quantitive scale}
* @param {d3.scale} [scale]
* @returns {d3.scale|dc.rowChart}
*/
_chart.x = function (scale) {
if (!arguments.length) {
return _x;
}
_x = scale;
return _chart;
};
function drawGridLines () {
_g.selectAll('g.tick')
.select('line.grid-line')
.remove();
_g.selectAll('g.tick')
.append('line')
.attr('class', 'grid-line')
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', 0)
.attr('y2', function () {
return -_chart.effectiveHeight();
});
}
function drawChart () {
_rowData = _chart.data();
drawAxis();
drawGridLines();
var rows = _g.selectAll('g.' + _rowCssClass)
.data(_rowData);
createElements(rows);
removeElements(rows);
updateElements(rows);
}
function createElements (rows) {
var rowEnter = rows.enter()
.append('g')
.attr('class', function (d, i) {
return _rowCssClass + ' _' + i;
});
rowEnter.append('rect').attr('width', 0);
createLabels(rowEnter);
}
function removeElements (rows) {
rows.exit().remove();
}
function rootValue () {
var root = _x(0);
return (root === -Infinity || root !== root) ? _x(1) : root;
}
function updateElements (rows) {
var n = _rowData.length;
var height;
if (!_fixedBarHeight) {
height = (_chart.effectiveHeight() - (n + 1) * _gap) / n;
} else {
height = _fixedBarHeight;
}
// vertically align label in center unless they override the value via property setter
if (!_hasLabelOffsetY) {
_labelOffsetY = height / 2;
}
var rect = rows.attr('transform', function (d, i) {
return 'translate(0,' + ((i + 1) * _gap + i * height) + ')';
}).select('rect')
.attr('height', height)
.attr('fill', _chart.getColor)
.on('click', onClick)
.classed('deselected', function (d) {
return (_chart.hasFilter()) ? !isSelectedRow(d) : false;
})
.classed('selected', function (d) {
return (_chart.hasFilter()) ? isSelectedRow(d) : false;
});
dc.transition(rect, _chart.transitionDuration(), _chart.transitionDelay())
.attr('width', function (d) {
return Math.abs(rootValue() - _x(_chart.valueAccessor()(d)));
})
.attr('transform', translateX);
createTitles(rows);
updateLabels(rows);
}
function createTitles (rows) {
if (_chart.renderTitle()) {
rows.select('title').remove();
rows.append('title').text(_chart.title());
}
}
function createLabels (rowEnter) {
if (_chart.renderLabel()) {
rowEnter.append('text')
.on('click', onClick);
}
if (_chart.renderTitleLabel()) {
rowEnter.append('text')
.attr('class', _titleRowCssClass)
.on('click', onClick);
}
}
function updateLabels (rows) {
if (_chart.renderLabel()) {
var lab = rows.select('text')
.attr('x', _labelOffsetX)
.attr('y', _labelOffsetY)
.attr('dy', _dyOffset)
.on('click', onClick)
.attr('class', function (d, i) {
return _rowCssClass + ' _' + i;
})
.text(function (d) {
return _chart.label()(d);
});
dc.transition(lab, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', translateX);
}
if (_chart.renderTitleLabel()) {
var titlelab = rows.select('.' + _titleRowCssClass)
.attr('x', _chart.effectiveWidth() - _titleLabelOffsetX)
.attr('y', _labelOffsetY)
.attr('dy', _dyOffset)
.attr('text-anchor', 'end')
.on('click', onClick)
.attr('class', function (d, i) {
return _titleRowCssClass + ' _' + i ;
})
.text(function (d) {
return _chart.title()(d);
});
dc.transition(titlelab, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', translateX);
}
}
/**
* Turn on/off Title label rendering (values) using SVG style of text-anchor 'end'.
* @method renderTitleLabel
* @memberof dc.rowChart
* @instance
* @param {Boolean} [renderTitleLabel=false]
* @returns {Boolean|dc.rowChart}
*/
_chart.renderTitleLabel = function (renderTitleLabel) {
if (!arguments.length) {
return _renderTitleLabel;
}
_renderTitleLabel = renderTitleLabel;
return _chart;
};
function onClick (d) {
_chart.onClick(d);
}
function translateX (d) {
var x = _x(_chart.cappedValueAccessor(d)),
x0 = rootValue(),
s = x > x0 ? x0 : x;
return 'translate(' + s + ',0)';
}
_chart._doRedraw = function () {
drawChart();
return _chart;
};
/**
* Get the x axis for the row chart instance. Note: not settable for row charts.
* See the {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#axis d3 axis object}
* documention for more information.
* @method xAxis
* @memberof dc.rowChart
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#axis d3.svg.axis}
* @example
* // customize x axis tick format
* chart.xAxis().tickFormat(function (v) {return v + '%';});
* // customize x axis tick values
* chart.xAxis().tickValues([0, 100, 200, 300]);
* @returns {d3.svg.axis}
*/
_chart.xAxis = function () {
return _xAxis;
};
/**
* Get or set the fixed bar height. Default is [false] which will auto-scale bars.
* For example, if you want to fix the height for a specific number of bars (useful in TopN charts)
* you could fix height as follows (where count = total number of bars in your TopN and gap is
* your vertical gap space).
* @method fixedBarHeight
* @memberof dc.rowChart
* @instance
* @example
* chart.fixedBarHeight( chartheight - (count + 1) * gap / count);
* @param {Boolean|Number} [fixedBarHeight=false]
* @returns {Boolean|Number|dc.rowChart}
*/
_chart.fixedBarHeight = function (fixedBarHeight) {
if (!arguments.length) {
return _fixedBarHeight;
}
_fixedBarHeight = fixedBarHeight;
return _chart;
};
/**
* Get or set the vertical gap space between rows on a particular row chart instance.
* @method gap
* @memberof dc.rowChart
* @instance
* @param {Number} [gap=5]
* @returns {Number|dc.rowChart}
*/
_chart.gap = function (gap) {
if (!arguments.length) {
return _gap;
}
_gap = gap;
return _chart;
};
/**
* Get or set the elasticity on x axis. If this attribute is set to true, then the x axis will rescle to auto-fit the
* data range when filtered.
* @method elasticX
* @memberof dc.rowChart
* @instance
* @param {Boolean} [elasticX]
* @returns {Boolean|dc.rowChart}
*/
_chart.elasticX = function (elasticX) {
if (!arguments.length) {
return _elasticX;
}
_elasticX = elasticX;
return _chart;
};
/**
* Get or set the x offset (horizontal space to the top left corner of a row) for labels on a particular row chart.
* @method labelOffsetX
* @memberof dc.rowChart
* @instance
* @param {Number} [labelOffsetX=10]
* @returns {Number|dc.rowChart}
*/
_chart.labelOffsetX = function (labelOffsetX) {
if (!arguments.length) {
return _labelOffsetX;
}
_labelOffsetX = labelOffsetX;
return _chart;
};
/**
* Get or set the y offset (vertical space to the top left corner of a row) for labels on a particular row chart.
* @method labelOffsetY
* @memberof dc.rowChart
* @instance
* @param {Number} [labelOffsety=15]
* @returns {Number|dc.rowChart}
*/
_chart.labelOffsetY = function (labelOffsety) {
if (!arguments.length) {
return _labelOffsetY;
}
_labelOffsetY = labelOffsety;
_hasLabelOffsetY = true;
return _chart;
};
/**
* Get of set the x offset (horizontal space between right edge of row and right edge or text.
* @method titleLabelOffsetX
* @memberof dc.rowChart
* @instance
* @param {Number} [titleLabelOffsetX=2]
* @returns {Number|dc.rowChart}
*/
_chart.titleLabelOffsetX = function (titleLabelOffsetX) {
if (!arguments.length) {
return _titleLabelOffsetX;
}
_titleLabelOffsetX = titleLabelOffsetX;
return _chart;
};
function isSelectedRow (d) {
return _chart.hasFilter(_chart.cappedKeyAccessor(d));
}
return _chart.anchor(parent, chartGroup);
};
/**
* Legend is a attachable widget that can be added to other dc charts to render horizontal legend
* labels.
*
* Examples:
* - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
* - {@link http://dc-js.github.com/dc.js/crime/index.html Canadian City Crime Stats}
* @class legend
* @memberof dc
* @example
* chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
* @returns {dc.legend}
*/
dc.legend = function () {
var LABEL_GAP = 2;
var _legend = {},
_parent,
_x = 0,
_y = 0,
_itemHeight = 12,
_gap = 5,
_horizontal = false,
_legendWidth = 560,
_itemWidth = 70,
_autoItemWidth = false,
_legendText = dc.pluck('name'),
_maxItems;
var _g;
_legend.parent = function (p) {
if (!arguments.length) {
return _parent;
}
_parent = p;
return _legend;
};
_legend.render = function () {
_parent.svg().select('g.dc-legend').remove();
_g = _parent.svg().append('g')
.attr('class', 'dc-legend')
.attr('transform', 'translate(' + _x + ',' + _y + ')');
var legendables = _parent.legendables();
if (_maxItems !== undefined) {
legendables = legendables.slice(0, _maxItems);
}
var itemEnter = _g.selectAll('g.dc-legend-item')
.data(legendables)
.enter()
.append('g')
.attr('class', 'dc-legend-item')
.on('mouseover', function (d) {
_parent.legendHighlight(d);
})
.on('mouseout', function (d) {
_parent.legendReset(d);
})
.on('click', function (d) {
d.chart.legendToggle(d);
});
_g.selectAll('g.dc-legend-item')
.classed('fadeout', function (d) {
return d.chart.isLegendableHidden(d);
});
if (legendables.some(dc.pluck('dashstyle'))) {
itemEnter
.append('line')
.attr('x1', 0)
.attr('y1', _itemHeight / 2)
.attr('x2', _itemHeight)
.attr('y2', _itemHeight / 2)
.attr('stroke-width', 2)
.attr('stroke-dasharray', dc.pluck('dashstyle'))
.attr('stroke', dc.pluck('color'));
} else {
itemEnter
.append('rect')
.attr('width', _itemHeight)
.attr('height', _itemHeight)
.attr('fill', function (d) {return d ? d.color : 'blue';});
}
itemEnter.append('text')
.text(_legendText)
.attr('x', _itemHeight + LABEL_GAP)
.attr('y', function () {
return _itemHeight / 2 + (this.clientHeight ? this.clientHeight : 13) / 2 - 2;
});
var _cumulativeLegendTextWidth = 0;
var row = 0;
itemEnter.attr('transform', function (d, i) {
if (_horizontal) {
var itemWidth = _autoItemWidth === true ? this.getBBox().width + _gap : _itemWidth;
if ((_cumulativeLegendTextWidth + itemWidth) > _legendWidth && _cumulativeLegendTextWidth > 0) {
++row;
_cumulativeLegendTextWidth = 0;
}
var translateBy = 'translate(' + _cumulativeLegendTextWidth + ',' + row * legendItemHeight() + ')';
_cumulativeLegendTextWidth += itemWidth;
return translateBy;
} else {
return 'translate(0,' + i * legendItemHeight() + ')';
}
});
};
function legendItemHeight () {
return _gap + _itemHeight;
}
/**
* Set or get x coordinate for legend widget.
* @method x
* @memberof dc.legend
* @instance
* @param {Number} [x=0]
* @returns {Number|dc.legend}
*/
_legend.x = function (x) {
if (!arguments.length) {
return _x;
}
_x = x;
return _legend;
};
/**
* Set or get y coordinate for legend widget.
* @method y
* @memberof dc.legend
* @instance
* @param {Number} [y=0]
* @returns {Number|dc.legend}
*/
_legend.y = function (y) {
if (!arguments.length) {
return _y;
}
_y = y;
return _legend;
};
/**
* Set or get gap between legend items.
* @method gap
* @memberof dc.legend
* @instance
* @param {Number} [gap=5]
* @returns {Number|dc.legend}
*/
_legend.gap = function (gap) {
if (!arguments.length) {
return _gap;
}
_gap = gap;
return _legend;
};
/**
* Set or get legend item height.
* @method itemHeight
* @memberof dc.legend
* @instance
* @param {Number} [itemHeight=12]
* @returns {Number|dc.legend}
*/
_legend.itemHeight = function (itemHeight) {
if (!arguments.length) {
return _itemHeight;
}
_itemHeight = itemHeight;
return _legend;
};
/**
* Position legend horizontally instead of vertically.
* @method horizontal
* @memberof dc.legend
* @instance
* @param {Boolean} [horizontal=false]
* @returns {Boolean|dc.legend}
*/
_legend.horizontal = function (horizontal) {
if (!arguments.length) {
return _horizontal;
}
_horizontal = horizontal;
return _legend;
};
/**
* Maximum width for horizontal legend.
* @method legendWidth
* @memberof dc.legend
* @instance
* @param {Number} [legendWidth=500]
* @returns {Number|dc.legend}
*/
_legend.legendWidth = function (legendWidth) {
if (!arguments.length) {
return _legendWidth;
}
_legendWidth = legendWidth;
return _legend;
};
/**
* Legend item width for horizontal legend.
* @method itemWidth
* @memberof dc.legend
* @instance
* @param {Number} [itemWidth=70]
* @returns {Number|dc.legend}
*/
_legend.itemWidth = function (itemWidth) {
if (!arguments.length) {
return _itemWidth;
}
_itemWidth = itemWidth;
return _legend;
};
/**
* Turn automatic width for legend items on or off. If true, {@link dc.legend#itemWidth itemWidth} is ignored.
* This setting takes into account the {@link dc.legend#gap gap}.
* @method autoItemWidth
* @memberof dc.legend
* @instance
* @param {Boolean} [autoItemWidth=false]
* @returns {Boolean|dc.legend}
*/
_legend.autoItemWidth = function (autoItemWidth) {
if (!arguments.length) {
return _autoItemWidth;
}
_autoItemWidth = autoItemWidth;
return _legend;
};
/**
* Set or get the legend text function. The legend widget uses this function to render the legend
* text for each item. If no function is specified the legend widget will display the names
* associated with each group.
* @method legendText
* @memberof dc.legend
* @instance
* @param {Function} [legendText]
* @returns {Function|dc.legend}
* @example
* // default legendText
* legend.legendText(dc.pluck('name'))
*
* // create numbered legend items
* chart.legend(dc.legend().legendText(function(d, i) { return i + '. ' + d.name; }))
*
* // create legend displaying group counts
* chart.legend(dc.legend().legendText(function(d) { return d.name + ': ' d.data; }))
**/
_legend.legendText = function (legendText) {
if (!arguments.length) {
return _legendText;
}
_legendText = legendText;
return _legend;
};
/**
* Maximum number of legend items to display
* @method maxItems
* @memberof dc.legend
* @instance
* @param {Number} [maxItems]
* @return {dc.legend}
*/
_legend.maxItems = function (maxItems) {
if (!arguments.length) {
return _maxItems;
}
_maxItems = dc.utils.isNumber(maxItems) ? maxItems : undefined;
return _legend;
};
return _legend;
};
/**
* A scatter plot chart
*
* Examples:
* - {@link http://dc-js.github.io/dc.js/examples/scatter.html Scatter Chart}
* - {@link http://dc-js.github.io/dc.js/examples/multi-scatter.html Multi-Scatter Chart}
* @class scatterPlot
* @memberof dc
* @mixes dc.coordinateGridMixin
* @example
* // create a scatter plot under #chart-container1 element using the default global chart group
* var chart1 = dc.scatterPlot('#chart-container1');
* // create a scatter plot under #chart-container2 element using chart group A
* var chart2 = dc.scatterPlot('#chart-container2', 'chartGroupA');
* // create a sub-chart under a composite parent chart
* var chart3 = dc.scatterPlot(compositeChart);
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.scatterPlot}
*/
dc.scatterPlot = function (parent, chartGroup) {
var _chart = dc.coordinateGridMixin({});
var _symbol = d3.svg.symbol();
var _existenceAccessor = function (d) { return d.value; };
var originalKeyAccessor = _chart.keyAccessor();
_chart.keyAccessor(function (d) { return originalKeyAccessor(d)[0]; });
_chart.valueAccessor(function (d) { return originalKeyAccessor(d)[1]; });
_chart.colorAccessor(function () { return _chart._groupName; });
_chart.title(function (d) {
// this basically just counteracts the setting of its own key/value accessors
// see https://github.com/dc-js/dc.js/issues/702
return _chart.keyAccessor()(d) + ',' + _chart.valueAccessor()(d) + ': ' +
_chart.existenceAccessor()(d);
});
var _locator = function (d) {
return 'translate(' + _chart.x()(_chart.keyAccessor()(d)) + ',' +
_chart.y()(_chart.valueAccessor()(d)) + ')';
};
var _highlightedSize = 7;
var _symbolSize = 5;
var _excludedSize = 3;
var _excludedColor = null;
var _excludedOpacity = 1.0;
var _emptySize = 0;
var _emptyOpacity = 0;
var _nonemptyOpacity = 1;
var _emptyColor = null;
var _filtered = [];
function elementSize (d, i) {
if (!_existenceAccessor(d)) {
return Math.pow(_emptySize, 2);
} else if (_filtered[i]) {
return Math.pow(_symbolSize, 2);
} else {
return Math.pow(_excludedSize, 2);
}
}
_symbol.size(elementSize);
dc.override(_chart, '_filter', function (filter) {
if (!arguments.length) {
return _chart.__filter();
}
return _chart.__filter(dc.filters.RangedTwoDimensionalFilter(filter));
});
_chart.plotData = function () {
var symbols = _chart.chartBodyG().selectAll('path.symbol')
.data(_chart.data());
symbols
.enter()
.append('path')
.attr('class', 'symbol')
.attr('opacity', 0)
.attr('fill', _chart.getColor)
.attr('transform', _locator);
symbols.call(renderTitles, _chart.data());
symbols.each(function (d, i) {
_filtered[i] = !_chart.filter() || _chart.filter().isFiltered([d.key[0], d.key[1]]);
});
dc.transition(symbols, _chart.transitionDuration(), _chart.transitionDelay())
.attr('opacity', function (d, i) {
if (!_existenceAccessor(d)) {
return _emptyOpacity;
} else if (_filtered[i]) {
return _nonemptyOpacity;
} else {
return _chart.excludedOpacity();
}
})
.attr('fill', function (d, i) {
if (_emptyColor && !_existenceAccessor(d)) {
return _emptyColor;
} else if (_chart.excludedColor() && !_filtered[i]) {
return _chart.excludedColor();
} else {
return _chart.getColor(d);
}
})
.attr('transform', _locator)
.attr('d', _symbol);
dc.transition(symbols.exit(), _chart.transitionDuration(), _chart.transitionDelay())
.attr('opacity', 0).remove();
};
function renderTitles (symbol, d) {
if (_chart.renderTitle()) {
symbol.selectAll('title').remove();
symbol.append('title').text(function (d) {
return _chart.title()(d);
});
}
}
/**
* Get or set the existence accessor. If a point exists, it is drawn with
* {@link dc.scatterPlot#symbolSize symbolSize} radius and
* opacity 1; if it does not exist, it is drawn with
* {@link dc.scatterPlot#emptySize emptySize} radius and opacity 0. By default,
* the existence accessor checks if the reduced value is truthy.
* @method existenceAccessor
* @memberof dc.scatterPlot
* @instance
* @see {@link dc.scatterPlot#symbolSize symbolSize}
* @see {@link dc.scatterPlot#emptySize emptySize}
* @example
* // default accessor
* chart.existenceAccessor(function (d) { return d.value; });
* @param {Function} [accessor]
* @returns {Function|dc.scatterPlot}
*/
_chart.existenceAccessor = function (accessor) {
if (!arguments.length) {
return _existenceAccessor;
}
_existenceAccessor = accessor;
return this;
};
/**
* Get or set the symbol type used for each point. By default the symbol is a circle.
* Type can be a constant or an accessor.
* @method symbol
* @memberof dc.scatterPlot
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol_type d3.svg.symbol.type}
* @example
* // Circle type
* chart.symbol('circle');
* // Square type
* chart.symbol('square');
* @param {String|Function} [type='circle']
* @returns {String|Function|dc.scatterPlot}
*/
_chart.symbol = function (type) {
if (!arguments.length) {
return _symbol.type();
}
_symbol.type(type);
return _chart;
};
/**
* Get or set the symbol generator. By default `dc.scatterPlot` will use
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol d3.svg.symbol()}
* to generate symbols. `dc.scatterPlot` will set the
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol_size size accessor}
* on the symbol generator.
* @method customSymbol
* @memberof dc.scatterPlot
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol d3.svg.symbol}
* @see {@link https://stackoverflow.com/questions/25332120/create-additional-d3-js-symbols Create additional D3.js symbols}
* @param {String|Function} [customSymbol=d3.svg.symbol()]
* @returns {String|Function|dc.scatterPlot}
*/
_chart.customSymbol = function (customSymbol) {
if (!arguments.length) {
return _symbol;
}
_symbol = customSymbol;
_symbol.size(elementSize);
return _chart;
};
/**
* Set or get radius for symbols.
* @method symbolSize
* @memberof dc.scatterPlot
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol_size d3.svg.symbol.size}
* @param {Number} [symbolSize=3]
* @returns {Number|dc.scatterPlot}
*/
_chart.symbolSize = function (symbolSize) {
if (!arguments.length) {
return _symbolSize;
}
_symbolSize = symbolSize;
return _chart;
};
/**
* Set or get radius for highlighted symbols.
* @method highlightedSize
* @memberof dc.scatterPlot
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol_size d3.svg.symbol.size}
* @param {Number} [highlightedSize=5]
* @returns {Number|dc.scatterPlot}
*/
_chart.highlightedSize = function (highlightedSize) {
if (!arguments.length) {
return _highlightedSize;
}
_highlightedSize = highlightedSize;
return _chart;
};
/**
* Set or get size for symbols excluded from this chart's filter. If null, no
* special size is applied for symbols based on their filter status.
* @method excludedSize
* @memberof dc.scatterPlot
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol_size d3.svg.symbol.size}
* @param {Number} [excludedSize=null]
* @returns {Number|dc.scatterPlot}
*/
_chart.excludedSize = function (excludedSize) {
if (!arguments.length) {
return _excludedSize;
}
_excludedSize = excludedSize;
return _chart;
};
/**
* Set or get color for symbols excluded from this chart's filter. If null, no
* special color is applied for symbols based on their filter status.
* @method excludedColor
* @memberof dc.scatterPlot
* @instance
* @param {Number} [excludedColor=null]
* @returns {Number|dc.scatterPlot}
*/
_chart.excludedColor = function (excludedColor) {
if (!arguments.length) {
return _excludedColor;
}
_excludedColor = excludedColor;
return _chart;
};
/**
* Set or get opacity for symbols excluded from this chart's filter.
* @method excludedOpacity
* @memberof dc.scatterPlot
* @instance
* @param {Number} [excludedOpacity=1.0]
* @returns {Number|dc.scatterPlot}
*/
_chart.excludedOpacity = function (excludedOpacity) {
if (!arguments.length) {
return _excludedOpacity;
}
_excludedOpacity = excludedOpacity;
return _chart;
};
/**
* Set or get radius for symbols when the group is empty.
* @method emptySize
* @memberof dc.scatterPlot
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md#symbol_size d3.svg.symbol.size}
* @param {Number} [emptySize=0]
* @returns {Number|dc.scatterPlot}
*/
_chart.hiddenSize = _chart.emptySize = function (emptySize) {
if (!arguments.length) {
return _emptySize;
}
_emptySize = emptySize;
return _chart;
};
/**
* Set or get color for symbols when the group is empty. If null, just use the
* {@link dc.colorMixin#colors colorMixin.colors} color scale zero value.
* @name emptyColor
* @memberof dc.scatterPlot
* @instance
* @param {String} [emptyColor=null]
* @return {String}
* @return {dc.scatterPlot}/
*/
_chart.emptyColor = function (emptyColor) {
if (!arguments.length) {
return _emptyColor;
}
_emptyColor = emptyColor;
return _chart;
};
/**
* Set or get opacity for symbols when the group is empty.
* @name emptyOpacity
* @memberof dc.scatterPlot
* @instance
* @param {Number} [emptyOpacity=0]
* @return {Number}
* @return {dc.scatterPlot}
*/
_chart.emptyOpacity = function (emptyOpacity) {
if (!arguments.length) {
return _emptyOpacity;
}
_emptyOpacity = emptyOpacity;
return _chart;
};
/**
* Set or get opacity for symbols when the group is not empty.
* @name nonemptyOpacity
* @memberof dc.scatterPlot
* @instance
* @param {Number} [nonemptyOpacity=1]
* @return {Number}
* @return {dc.scatterPlot}
*/
_chart.nonemptyOpacity = function (nonemptyOpacity) {
if (!arguments.length) {
return _emptyOpacity;
}
_nonemptyOpacity = nonemptyOpacity;
return _chart;
};
_chart.legendables = function () {
return [{chart: _chart, name: _chart._groupName, color: _chart.getColor()}];
};
_chart.legendHighlight = function (d) {
resizeSymbolsWhere(function (symbol) {
return symbol.attr('fill') === d.color;
}, _highlightedSize);
_chart.chartBodyG().selectAll('.chart-body path.symbol').filter(function () {
return d3.select(this).attr('fill') !== d.color;
}).classed('fadeout', true);
};
_chart.legendReset = function (d) {
resizeSymbolsWhere(function (symbol) {
return symbol.attr('fill') === d.color;
}, _symbolSize);
_chart.chartBodyG().selectAll('.chart-body path.symbol').filter(function () {
return d3.select(this).attr('fill') !== d.color;
}).classed('fadeout', false);
};
function resizeSymbolsWhere (condition, size) {
var symbols = _chart.chartBodyG().selectAll('.chart-body path.symbol').filter(function () {
return condition(d3.select(this));
});
var oldSize = _symbol.size();
_symbol.size(Math.pow(size, 2));
dc.transition(symbols, _chart.transitionDuration(), _chart.transitionDelay()).attr('d', _symbol);
_symbol.size(oldSize);
}
_chart.setHandlePaths = function () {
// no handle paths for poly-brushes
};
_chart.extendBrush = function () {
var extent = _chart.brush().extent();
if (_chart.round()) {
extent[0] = extent[0].map(_chart.round());
extent[1] = extent[1].map(_chart.round());
_chart.g().select('.brush')
.call(_chart.brush().extent(extent));
}
return extent;
};
_chart.brushIsEmpty = function (extent) {
return _chart.brush().empty() || !extent || extent[0][0] >= extent[1][0] || extent[0][1] >= extent[1][1];
};
_chart._brushing = function () {
var extent = _chart.extendBrush();
_chart.redrawBrush(_chart.g());
if (_chart.brushIsEmpty(extent)) {
dc.events.trigger(function () {
_chart.filter(null);
_chart.redrawGroup();
});
} else {
var ranged2DFilter = dc.filters.RangedTwoDimensionalFilter(extent);
dc.events.trigger(function () {
_chart.filter(null);
_chart.filter(ranged2DFilter);
_chart.redrawGroup();
}, dc.constants.EVENT_DELAY);
}
};
_chart.setBrushY = function (gBrush) {
gBrush.call(_chart.brush().y(_chart.y()));
};
return _chart.anchor(parent, chartGroup);
};
/**
* A display of a single numeric value.
* Unlike other charts, you do not need to set a dimension. Instead a group object must be provided and
* a valueAccessor that returns a single value.
* @class numberDisplay
* @memberof dc
* @mixes dc.baseMixin
* @example
* // create a number display under #chart-container1 element using the default global chart group
* var display1 = dc.numberDisplay('#chart-container1');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.numberDisplay}
*/
dc.numberDisplay = function (parent, chartGroup) {
var SPAN_CLASS = 'number-display';
var _formatNumber = d3.format('.2s');
var _chart = dc.baseMixin({});
var _html = {one: '', some: '', none: ''};
var _lastValue;
// dimension not required
_chart._mandatoryAttributes(['group']);
// default to ordering by value, to emulate old group.top(1) behavior when multiple groups
_chart.ordering(function (kv) { return kv.value; });
/**
* Gets or sets an optional object specifying HTML templates to use depending on the number
* displayed. The text `%number` will be replaced with the current value.
* - one: HTML template to use if the number is 1
* - zero: HTML template to use if the number is 0
* - some: HTML template to use otherwise
* @method html
* @memberof dc.numberDisplay
* @instance
* @example
* numberWidget.html({
* one:'%number record',
* some:'%number records',
* none:'no records'})
* @param {{one:String, some:String, none:String}} [html={one: '', some: '', none: ''}]
* @returns {{one:String, some:String, none:String}|dc.numberDisplay}
*/
_chart.html = function (html) {
if (!arguments.length) {
return _html;
}
if (html.none) {
_html.none = html.none;//if none available
} else if (html.one) {
_html.none = html.one;//if none not available use one
} else if (html.some) {
_html.none = html.some;//if none and one not available use some
}
if (html.one) {
_html.one = html.one;//if one available
} else if (html.some) {
_html.one = html.some;//if one not available use some
}
if (html.some) {
_html.some = html.some;//if some available
} else if (html.one) {
_html.some = html.one;//if some not available use one
}
return _chart;
};
/**
* Calculate and return the underlying value of the display.
* @method value
* @memberof dc.numberDisplay
* @instance
* @returns {Number}
*/
_chart.value = function () {
return _chart.data();
};
function maxBin (all) {
if (!all.length) {
return null;
}
var sorted = _chart._computeOrderedGroups(all);
return sorted[sorted.length - 1];
}
_chart.data(function (group) {
var valObj = group.value ? group.value() : maxBin(group.all());
return _chart.valueAccessor()(valObj);
});
_chart.transitionDuration(250); // good default
_chart.transitionDelay(0);
_chart._doRender = function () {
var newValue = _chart.value(),
span = _chart.selectAll('.' + SPAN_CLASS);
if (span.empty()) {
span = span.data([0])
.enter()
.append('span')
.attr('class', SPAN_CLASS);
}
span.transition()
.duration(_chart.transitionDuration())
.delay(_chart.transitionDelay())
.ease('quad-out-in')
.tween('text', function () {
// [XA] don't try and interpolate from Infinity, else this breaks.
var interpStart = isFinite(_lastValue) ? _lastValue : 0;
var interp = d3.interpolateNumber(interpStart || 0, newValue);
_lastValue = newValue;
return function (t) {
var html = null, num = _chart.formatNumber()(interp(t));
if (newValue === 0 && (_html.none !== '')) {
html = _html.none;
} else if (newValue === 1 && (_html.one !== '')) {
html = _html.one;
} else if (_html.some !== '') {
html = _html.some;
}
this.innerHTML = html ? html.replace('%number', num) : num;
};
});
};
_chart._doRedraw = function () {
return _chart._doRender();
};
/**
* Get or set a function to format the value for the display.
* @method formatNumber
* @memberof dc.numberDisplay
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md d3.format}
* @param {Function} [formatter=d3.format('.2s')]
* @returns {Function|dc.numberDisplay}
*/
_chart.formatNumber = function (formatter) {
if (!arguments.length) {
return _formatNumber;
}
_formatNumber = formatter;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
* A heat map is matrix that represents the values of two dimensions of data using colors.
* @class heatMap
* @memberof dc
* @mixes dc.colorMixin
* @mixes dc.marginMixin
* @mixes dc.baseMixin
* @example
* // create a heat map under #chart-container1 element using the default global chart group
* var heatMap1 = dc.heatMap('#chart-container1');
* // create a heat map under #chart-container2 element using chart group A
* var heatMap2 = dc.heatMap('#chart-container2', 'chartGroupA');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.heatMap}
*/
dc.heatMap = function (parent, chartGroup) {
var DEFAULT_BORDER_RADIUS = 6.75;
var _chartBody;
var _cols;
var _rows;
var _colOrdering = d3.ascending;
var _rowOrdering = d3.ascending;
var _colScale = d3.scale.ordinal();
var _rowScale = d3.scale.ordinal();
var _xBorderRadius = DEFAULT_BORDER_RADIUS;
var _yBorderRadius = DEFAULT_BORDER_RADIUS;
var _chart = dc.colorMixin(dc.marginMixin(dc.baseMixin({})));
_chart._mandatoryAttributes(['group']);
_chart.title(_chart.colorAccessor());
var _colsLabel = function (d) {
return d;
};
var _rowsLabel = function (d) {
return d;
};
/**
* Set or get the column label function. The chart class uses this function to render
* column labels on the X axis. It is passed the column name.
* @method colsLabel
* @memberof dc.heatMap
* @instance
* @example
* // the default label function just returns the name
* chart.colsLabel(function(d) { return d; });
* @param {Function} [labelFunction=function(d) { return d; }]
* @returns {Function|dc.heatMap}
*/
_chart.colsLabel = function (labelFunction) {
if (!arguments.length) {
return _colsLabel;
}
_colsLabel = labelFunction;
return _chart;
};
/**
* Set or get the row label function. The chart class uses this function to render
* row labels on the Y axis. It is passed the row name.
* @method rowsLabel
* @memberof dc.heatMap
* @instance
* @example
* // the default label function just returns the name
* chart.rowsLabel(function(d) { return d; });
* @param {Function} [labelFunction=function(d) { return d; }]
* @returns {Function|dc.heatMap}
*/
_chart.rowsLabel = function (labelFunction) {
if (!arguments.length) {
return _rowsLabel;
}
_rowsLabel = labelFunction;
return _chart;
};
var _xAxisOnClick = function (d) { filterAxis(0, d); };
var _yAxisOnClick = function (d) { filterAxis(1, d); };
var _boxOnClick = function (d) {
var filter = d.key;
dc.events.trigger(function () {
_chart.filter(filter);
_chart.redrawGroup();
});
};
function filterAxis (axis, value) {
var cellsOnAxis = _chart.selectAll('.box-group').filter(function (d) {
return d.key[axis] === value;
});
var unfilteredCellsOnAxis = cellsOnAxis.filter(function (d) {
return !_chart.hasFilter(d.key);
});
dc.events.trigger(function () {
var selection = unfilteredCellsOnAxis.empty() ? cellsOnAxis : unfilteredCellsOnAxis;
var filters = selection.data().map(function (kv) {
return dc.filters.TwoDimensionalFilter(kv.key);
});
_chart._filter([filters]);
_chart.redrawGroup();
});
}
dc.override(_chart, 'filter', function (filter) {
if (!arguments.length) {
return _chart._filter();
}
return _chart._filter(dc.filters.TwoDimensionalFilter(filter));
});
/**
* Gets or sets the values used to create the rows of the heatmap, as an array. By default, all
* the values will be fetched from the data using the value accessor.
* @method rows
* @memberof dc.heatMap
* @instance
* @param {Array<String|Number>} [rows]
* @returns {Array<String|Number>|dc.heatMap}
*/
_chart.rows = function (rows) {
if (!arguments.length) {
return _rows;
}
_rows = rows;
return _chart;
};
/**
#### .rowOrdering([orderFunction])
Get or set an accessor to order the rows. Default is d3.ascending.
*/
_chart.rowOrdering = function (_) {
if (!arguments.length) {
return _rowOrdering;
}
_rowOrdering = _;
return _chart;
};
/**
* Gets or sets the keys used to create the columns of the heatmap, as an array. By default, all
* the values will be fetched from the data using the key accessor.
* @method cols
* @memberof dc.heatMap
* @instance
* @param {Array<String|Number>} [cols]
* @returns {Array<String|Number>|dc.heatMap}
*/
_chart.cols = function (cols) {
if (!arguments.length) {
return _cols;
}
_cols = cols;
return _chart;
};
/**
#### .colOrdering([orderFunction])
Get or set an accessor to order the cols. Default is ascending.
*/
_chart.colOrdering = function (_) {
if (!arguments.length) {
return _colOrdering;
}
_colOrdering = _;
return _chart;
};
_chart._doRender = function () {
_chart.resetSvg();
_chartBody = _chart.svg()
.append('g')
.attr('class', 'heatmap')
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
return _chart._doRedraw();
};
_chart._doRedraw = function () {
var data = _chart.data(),
rows = _chart.rows() || data.map(_chart.valueAccessor()),
cols = _chart.cols() || data.map(_chart.keyAccessor());
if (_rowOrdering) {
rows = rows.sort(_rowOrdering);
}
if (_colOrdering) {
cols = cols.sort(_colOrdering);
}
rows = _rowScale.domain(rows);
cols = _colScale.domain(cols);
var rowCount = rows.domain().length,
colCount = cols.domain().length,
boxWidth = Math.floor(_chart.effectiveWidth() / colCount),
boxHeight = Math.floor(_chart.effectiveHeight() / rowCount);
cols.rangeRoundBands([0, _chart.effectiveWidth()]);
rows.rangeRoundBands([_chart.effectiveHeight(), 0]);
var boxes = _chartBody.selectAll('g.box-group').data(_chart.data(), function (d, i) {
return _chart.keyAccessor()(d, i) + '\0' + _chart.valueAccessor()(d, i);
});
var gEnter = boxes.enter().append('g')
.attr('class', 'box-group');
gEnter.append('rect')
.attr('class', 'heat-box')
.attr('fill', 'white')
.on('click', _chart.boxOnClick());
if (_chart.renderTitle()) {
gEnter.append('title');
boxes.select('title').text(_chart.title());
}
dc.transition(boxes.select('rect'), _chart.transitionDuration(), _chart.transitionDelay())
.attr('x', function (d, i) { return cols(_chart.keyAccessor()(d, i)); })
.attr('y', function (d, i) { return rows(_chart.valueAccessor()(d, i)); })
.attr('rx', _xBorderRadius)
.attr('ry', _yBorderRadius)
.attr('fill', _chart.getColor)
.attr('width', boxWidth)
.attr('height', boxHeight);
boxes.exit().remove();
var gCols = _chartBody.select('g.cols');
if (gCols.empty()) {
gCols = _chartBody.append('g').attr('class', 'cols axis');
}
var gColsText = gCols.selectAll('text').data(cols.domain());
gColsText.enter().append('text')
.attr('x', function (d) { return cols(d) + boxWidth / 2; })
.style('text-anchor', 'middle')
.attr('y', _chart.effectiveHeight())
.attr('dy', 12)
.on('click', _chart.xAxisOnClick())
.text(_chart.colsLabel());
dc.transition(gColsText, _chart.transitionDuration(), _chart.transitionDelay())
.text(_chart.colsLabel())
.attr('x', function (d) { return cols(d) + boxWidth / 2; })
.attr('y', _chart.effectiveHeight());
gColsText.exit().remove();
var gRows = _chartBody.select('g.rows');
if (gRows.empty()) {
gRows = _chartBody.append('g').attr('class', 'rows axis');
}
var gRowsText = gRows.selectAll('text').data(rows.domain());
gRowsText.enter().append('text')
.attr('dy', 6)
.style('text-anchor', 'end')
.attr('x', 0)
.attr('dx', -2)
.on('click', _chart.yAxisOnClick())
.text(_chart.rowsLabel());
dc.transition(gRowsText, _chart.transitionDuration(), _chart.transitionDelay())
.text(_chart.rowsLabel())
.attr('y', function (d) { return rows(d) + boxHeight / 2; });
gRowsText.exit().remove();
if (_chart.hasFilter()) {
_chart.selectAll('g.box-group').each(function (d) {
if (_chart.isSelectedNode(d)) {
_chart.highlightSelected(this);
} else {
_chart.fadeDeselected(this);
}
});
} else {
_chart.selectAll('g.box-group').each(function () {
_chart.resetHighlight(this);
});
}
return _chart;
};
/**
* Gets or sets the handler that fires when an individual cell is clicked in the heatmap.
* By default, filtering of the cell will be toggled.
* @method boxOnClick
* @memberof dc.heatMap
* @instance
* @example
* // default box on click handler
* chart.boxOnClick(function (d) {
* var filter = d.key;
* dc.events.trigger(function () {
* _chart.filter(filter);
* _chart.redrawGroup();
* });
* });
* @param {Function} [handler]
* @returns {Function|dc.heatMap}
*/
_chart.boxOnClick = function (handler) {
if (!arguments.length) {
return _boxOnClick;
}
_boxOnClick = handler;
return _chart;
};
/**
* Gets or sets the handler that fires when a column tick is clicked in the x axis.
* By default, if any cells in the column are unselected, the whole column will be selected,
* otherwise the whole column will be unselected.
* @method xAxisOnClick
* @memberof dc.heatMap
* @instance
* @param {Function} [handler]
* @returns {Function|dc.heatMap}
*/
_chart.xAxisOnClick = function (handler) {
if (!arguments.length) {
return _xAxisOnClick;
}
_xAxisOnClick = handler;
return _chart;
};
/**
* Gets or sets the handler that fires when a row tick is clicked in the y axis.
* By default, if any cells in the row are unselected, the whole row will be selected,
* otherwise the whole row will be unselected.
* @method yAxisOnClick
* @memberof dc.heatMap
* @instance
* @param {Function} [handler]
* @returns {Function|dc.heatMap}
*/
_chart.yAxisOnClick = function (handler) {
if (!arguments.length) {
return _yAxisOnClick;
}
_yAxisOnClick = handler;
return _chart;
};
/**
* Gets or sets the X border radius. Set to 0 to get full rectangles.
* @method xBorderRadius
* @memberof dc.heatMap
* @instance
* @param {Number} [xBorderRadius=6.75]
* @returns {Number|dc.heatMap}
*/
_chart.xBorderRadius = function (xBorderRadius) {
if (!arguments.length) {
return _xBorderRadius;
}
_xBorderRadius = xBorderRadius;
return _chart;
};
/**
* Gets or sets the Y border radius. Set to 0 to get full rectangles.
* @method yBorderRadius
* @memberof dc.heatMap
* @instance
* @param {Number} [yBorderRadius=6.75]
* @returns {Number|dc.heatMap}
*/
_chart.yBorderRadius = function (yBorderRadius) {
if (!arguments.length) {
return _yBorderRadius;
}
_yBorderRadius = yBorderRadius;
return _chart;
};
_chart.isSelectedNode = function (d) {
return _chart.hasFilter(d.key);
};
return _chart.anchor(parent, chartGroup);
};
// https://github.com/d3/d3-plugins/blob/master/box/box.js
(function () {
// Inspired by http://informationandvisualization.de/blog/box-plot
d3.box = function () {
var width = 1,
height = 1,
duration = 0,
delay = 0,
domain = null,
value = Number,
whiskers = boxWhiskers,
quartiles = boxQuartiles,
tickFormat = null;
// For each small multiple…
function box (g) {
g.each(function (d, i) {
d = d.map(value).sort(d3.ascending);
var g = d3.select(this),
n = d.length,
min = d[0],
max = d[n - 1];
// Compute quartiles. Must return exactly 3 elements.
var quartileData = d.quartiles = quartiles(d);
// Compute whiskers. Must return exactly 2 elements, or null.
var whiskerIndices = whiskers && whiskers.call(this, d, i),
whiskerData = whiskerIndices && whiskerIndices.map(function (i) { return d[i]; });
// Compute outliers. If no whiskers are specified, all data are 'outliers'.
// We compute the outliers as indices, so that we can join across transitions!
var outlierIndices = whiskerIndices ?
d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n)) : d3.range(n);
// Compute the new x-scale.
var x1 = d3.scale.linear()
.domain(domain && domain.call(this, d, i) || [min, max])
.range([height, 0]);
// Retrieve the old x-scale, if this is an update.
var x0 = this.__chart__ || d3.scale.linear()
.domain([0, Infinity])
.range(x1.range());
// Stash the new scale.
this.__chart__ = x1;
// Note: the box, median, and box tick elements are fixed in number,
// so we only have to handle enter and update. In contrast, the outliers
// and other elements are variable, so we need to exit them! Variable
// elements also fade in and out.
// Update center line: the vertical line spanning the whiskers.
var center = g.selectAll('line.center')
.data(whiskerData ? [whiskerData] : []);
center.enter().insert('line', 'rect')
.attr('class', 'center')
.attr('x1', width / 2)
.attr('y1', function (d) { return x0(d[0]); })
.attr('x2', width / 2)
.attr('y2', function (d) { return x0(d[1]); })
.style('opacity', 1e-6)
.transition()
.duration(duration)
.delay(delay)
.style('opacity', 1)
.attr('y1', function (d) { return x1(d[0]); })
.attr('y2', function (d) { return x1(d[1]); });
center.transition()
.duration(duration)
.delay(delay)
.style('opacity', 1)
.attr('x1', width / 2)
.attr('x2', width / 2)
.attr('y1', function (d) { return x1(d[0]); })
.attr('y2', function (d) { return x1(d[1]); });
center.exit().transition()
.duration(duration)
.delay(delay)
.style('opacity', 1e-6)
.attr('y1', function (d) { return x1(d[0]); })
.attr('y2', function (d) { return x1(d[1]); })
.remove();
// Update innerquartile box.
var box = g.selectAll('rect.box')
.data([quartileData]);
box.enter().append('rect')
.attr('class', 'box')
.attr('x', 0)
.attr('y', function (d) { return x0(d[2]); })
.attr('width', width)
.attr('height', function (d) { return x0(d[0]) - x0(d[2]); })
.transition()
.duration(duration)
.delay(delay)
.attr('y', function (d) { return x1(d[2]); })
.attr('height', function (d) { return x1(d[0]) - x1(d[2]); });
box.transition()
.duration(duration)
.delay(delay)
.attr('width', width)
.attr('y', function (d) { return x1(d[2]); })
.attr('height', function (d) { return x1(d[0]) - x1(d[2]); });
// Update median line.
var medianLine = g.selectAll('line.median')
.data([quartileData[1]]);
medianLine.enter().append('line')
.attr('class', 'median')
.attr('x1', 0)
.attr('y1', x0)
.attr('x2', width)
.attr('y2', x0)
.transition()
.duration(duration)
.delay(delay)
.attr('y1', x1)
.attr('y2', x1);
medianLine.transition()
.duration(duration)
.delay(delay)
.attr('x1', 0)
.attr('x2', width)
.attr('y1', x1)
.attr('y2', x1);
// Update whiskers.
var whisker = g.selectAll('line.whisker')
.data(whiskerData || []);
whisker.enter().insert('line', 'circle, text')
.attr('class', 'whisker')
.attr('x1', 0)
.attr('y1', x0)
.attr('x2', width)
.attr('y2', x0)
.style('opacity', 1e-6)
.transition()
.duration(duration)
.delay(delay)
.attr('y1', x1)
.attr('y2', x1)
.style('opacity', 1);
whisker.transition()
.duration(duration)
.delay(delay)
.attr('x1', 0)
.attr('x2', width)
.attr('y1', x1)
.attr('y2', x1)
.style('opacity', 1);
whisker.exit().transition()
.duration(duration)
.delay(delay)
.attr('y1', x1)
.attr('y2', x1)
.style('opacity', 1e-6)
.remove();
// Update outliers.
var outlier = g.selectAll('circle.outlier')
.data(outlierIndices, Number);
outlier.enter().insert('circle', 'text')
.attr('class', 'outlier')
.attr('r', 5)
.attr('cx', width / 2)
.attr('cy', function (i) { return x0(d[i]); })
.style('opacity', 1e-6)
.transition()
.duration(duration)
.delay(delay)
.attr('cy', function (i) { return x1(d[i]); })
.style('opacity', 1);
outlier.transition()
.duration(duration)
.delay(delay)
.attr('cx', width / 2)
.attr('cy', function (i) { return x1(d[i]); })
.style('opacity', 1);
outlier.exit().transition()
.duration(duration)
.delay(delay)
.attr('cy', function (i) { return x1(d[i]); })
.style('opacity', 1e-6)
.remove();
// Compute the tick format.
var format = tickFormat || x1.tickFormat(8);
// Update box ticks.
var boxTick = g.selectAll('text.box')
.data(quartileData);
boxTick.enter().append('text')
.attr('class', 'box')
.attr('dy', '.3em')
.attr('dx', function (d, i) { return i & 1 ? 6 : -6; })
.attr('x', function (d, i) { return i & 1 ? width : 0; })
.attr('y', x0)
.attr('text-anchor', function (d, i) { return i & 1 ? 'start' : 'end'; })
.text(format)
.transition()
.duration(duration)
.delay(delay)
.attr('y', x1);
boxTick.transition()
.duration(duration)
.delay(delay)
.text(format)
.attr('x', function (d, i) { return i & 1 ? width : 0; })
.attr('y', x1);
// Update whisker ticks. These are handled separately from the box
// ticks because they may or may not exist, and we want don't want
// to join box ticks pre-transition with whisker ticks post-.
var whiskerTick = g.selectAll('text.whisker')
.data(whiskerData || []);
whiskerTick.enter().append('text')
.attr('class', 'whisker')
.attr('dy', '.3em')
.attr('dx', 6)
.attr('x', width)
.attr('y', x0)
.text(format)
.style('opacity', 1e-6)
.transition()
.duration(duration)
.delay(delay)
.attr('y', x1)
.style('opacity', 1);
whiskerTick.transition()
.duration(duration)
.delay(delay)
.text(format)
.attr('x', width)
.attr('y', x1)
.style('opacity', 1);
whiskerTick.exit().transition()
.duration(duration)
.delay(delay)
.attr('y', x1)
.style('opacity', 1e-6)
.remove();
});
d3.timer.flush();
}
box.width = function (x) {
if (!arguments.length) {
return width;
}
width = x;
return box;
};
box.height = function (x) {
if (!arguments.length) {
return height;
}
height = x;
return box;
};
box.tickFormat = function (x) {
if (!arguments.length) {
return tickFormat;
}
tickFormat = x;
return box;
};
box.duration = function (x) {
if (!arguments.length) {
return duration;
}
duration = x;
return box;
};
box.domain = function (x) {
if (!arguments.length) {
return domain;
}
domain = x === null ? x : d3.functor(x);
return box;
};
box.value = function (x) {
if (!arguments.length) {
return value;
}
value = x;
return box;
};
box.whiskers = function (x) {
if (!arguments.length) {
return whiskers;
}
whiskers = x;
return box;
};
box.quartiles = function (x) {
if (!arguments.length) {
return quartiles;
}
quartiles = x;
return box;
};
return box;
};
function boxWhiskers (d) {
return [0, d.length - 1];
}
function boxQuartiles (d) {
return [
d3.quantile(d, 0.25),
d3.quantile(d, 0.5),
d3.quantile(d, 0.75)
];
}
})();
/**
* A box plot is a chart that depicts numerical data via their quartile ranges.
*
* Examples:
* - {@link http://dc-js.github.io/dc.js/examples/box-plot-time.html Box plot time example}
* - {@link http://dc-js.github.io/dc.js/examples/box-plot.html Box plot example}
* @class boxPlot
* @memberof dc
* @mixes dc.coordinateGridMixin
* @example
* // create a box plot under #chart-container1 element using the default global chart group
* var boxPlot1 = dc.boxPlot('#chart-container1');
* // create a box plot under #chart-container2 element using chart group A
* var boxPlot2 = dc.boxPlot('#chart-container2', 'chartGroupA');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#selecting-elements d3 single selector} specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {dc.boxPlot}
*/
dc.boxPlot = function (parent, chartGroup) {
var _chart = dc.coordinateGridMixin({});
// Returns a function to compute the interquartile range.
function DEFAULT_WHISKERS_IQR (k) {
return function (d) {
var q1 = d.quartiles[0],
q3 = d.quartiles[2],
iqr = (q3 - q1) * k,
i = -1,
j = d.length;
do { ++i; } while (d[i] < q1 - iqr);
do { --j; } while (d[j] > q3 + iqr);
return [i, j];
};
}
var _whiskerIqrFactor = 1.5;
var _whiskersIqr = DEFAULT_WHISKERS_IQR;
var _whiskers = _whiskersIqr(_whiskerIqrFactor);
var _box = d3.box();
var _tickFormat = null;
var _boxWidth = function (innerChartWidth, xUnits) {
if (_chart.isOrdinal()) {
return _chart.x().rangeBand();
} else {
return innerChartWidth / (1 + _chart.boxPadding()) / xUnits;
}
};
// default padding to handle min/max whisker text
_chart.yAxisPadding(12);
// default to ordinal
_chart.x(d3.scale.ordinal());
_chart.xUnits(dc.units.ordinal);
// valueAccessor should return an array of values that can be coerced into numbers
// or if data is overloaded for a static array of arrays, it should be `Number`.
// Empty arrays are not included.
_chart.data(function (group) {
return group.all().map(function (d) {
d.map = function (accessor) { return accessor.call(d, d); };
return d;
}).filter(function (d) {
var values = _chart.valueAccessor()(d);
return values.length !== 0;
});
});
/**
* Get or set the spacing between boxes as a fraction of box size. Valid values are within 0-1.
* See the {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#ordinal_rangeBands d3 docs}
* for a visual description of how the padding is applied.
* @method boxPadding
* @memberof dc.boxPlot
* @instance
* @see {@link https://github.com/d3/d3-3.x-api-reference/blob/master/Ordinal-Scales.md#ordinal_rangeBands d3.scale.ordinal.rangeBands}
* @param {Number} [padding=0.8]
* @returns {Number|dc.boxPlot}
*/
_chart.boxPadding = _chart._rangeBandPadding;
_chart.boxPadding(0.8);
/**
* Get or set the outer padding on an ordinal box chart. This setting has no effect on non-ordinal charts
* or on charts with a custom {@link dc.boxPlot#boxWidth .boxWidth}. Will pad the width by
* `padding * barWidth` on each side of the chart.
* @method outerPadding
* @memberof dc.boxPlot
* @instance
* @param {Number} [padding=0.5]
* @returns {Number|dc.boxPlot}
*/
_chart.outerPadding = _chart._outerRangeBandPadding;
_chart.outerPadding(0.5);
/**
* Get or set the numerical width of the boxplot box. The width may also be a function taking as
* parameters the chart width excluding the right and left margins, as well as the number of x
* units.
* @example
* // Using numerical parameter
* chart.boxWidth(10);
* // Using function
* chart.boxWidth((innerChartWidth, xUnits) { ... });
* @method boxWidth
* @memberof dc.boxPlot
* @instance
* @param {Number|Function} [boxWidth=0.5]
* @returns {Number|Function|dc.boxPlot}
*/
_chart.boxWidth = function (boxWidth) {
if (!arguments.length) {
return _boxWidth;
}
_boxWidth = d3.functor(boxWidth);
return _chart;
};
var boxTransform = function (d, i) {
var xOffset = _chart.x()(_chart.keyAccessor()(d, i));
return 'translate(' + xOffset + ', 0)';
};
_chart._preprocessData = function () {
if (_chart.elasticX()) {
_chart.x().domain([]);
}
};
_chart.plotData = function () {
var _calculatedBoxWidth = _boxWidth(_chart.effectiveWidth(), _chart.xUnitCount());
_box.whiskers(_whiskers)
.width(_calculatedBoxWidth)
.height(_chart.effectiveHeight())
.value(_chart.valueAccessor())
.domain(_chart.y().domain())
.duration(_chart.transitionDuration())
.tickFormat(_tickFormat);
var boxesG = _chart.chartBodyG().selectAll('g.box').data(_chart.data(), _chart.keyAccessor());
renderBoxes(boxesG);
updateBoxes(boxesG);
removeBoxes(boxesG);
_chart.fadeDeselectedArea();
};
function renderBoxes (boxesG) {
var boxesGEnter = boxesG.enter().append('g');
boxesGEnter
.attr('class', 'box')
.attr('transform', boxTransform)
.call(_box)
.on('click', function (d) {
_chart.filter(_chart.keyAccessor()(d));
_chart.redrawGroup();
});
}
function updateBoxes (boxesG) {
dc.transition(boxesG, _chart.transitionDuration(), _chart.transitionDelay())
.attr('transform', boxTransform)
.call(_box)
.each(function () {
d3.select(this).select('rect.box').attr('fill', _chart.getColor);
});
}
function removeBoxes (boxesG) {
boxesG.exit().remove().call(_box);
}
_chart.fadeDeselectedArea = function () {
if (_chart.hasFilter()) {
if (_chart.isOrdinal()) {
_chart.g().selectAll('g.box').each(function (d) {
if (_chart.isSelectedNode(d)) {
_chart.highlightSelected(this);
} else {
_chart.fadeDeselected(this);
}
});
} else {
var extent = _chart.brush().extent();
var start = extent[0];
var end = extent[1];
var keyAccessor = _chart.keyAccessor();
_chart.g().selectAll('g.box').each(function (d) {
var key = keyAccessor(d);
if (key < start || key >= end) {
_chart.fadeDeselected(this);
} else {
_chart.highlightSelected(this);
}
});
}
} else {
_chart.g().selectAll('g.box').each(function () {
_chart.resetHighlight(this);
});
}
};
_chart.isSelectedNode = function (d) {
return _chart.hasFilter(_chart.keyAccessor()(d));
};
_chart.yAxisMin = function () {
var min = d3.min(_chart.data(), function (e) {
return d3.min(_chart.valueAccessor()(e));
});
return dc.utils.subtract(min, _chart.yAxisPadding());
};
_chart.yAxisMax = function () {
var max = d3.max(_chart.data(), function (e) {
return d3.max(_chart.valueAccessor()(e));
});
return dc.utils.add(max, _chart.yAxisPadding());
};
/**
* Set the numerical format of the boxplot median, whiskers and quartile labels. Defaults to
* integer formatting.
* @example
* // format ticks to 2 decimal places
* chart.tickFormat(d3.format('.2f'));
* @method tickFormat
* @memberof dc.boxPlot
* @instance
* @param {Function} [tickFormat]
* @returns {Number|Function|dc.boxPlot}
*/
_chart.tickFormat = function (tickFormat) {
if (!arguments.length) {
return _tickFormat;
}
_tickFormat = tickFormat;
return _chart;
};
return _chart.anchor(parent, chartGroup);
};
/**
* 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.
* @class selectMenu
* @memberof dc
* @mixes dc.baseMixin
* @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;
* })
* @param {String|node|d3.selection|dc.compositeChart} parent - Any valid
* [d3 single selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying
* a dom block element such as a div; or a dom element or d3 selection.
* @param {String} [chartGroup] - 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.
* @returns {selectMenu}
**/
dc.selectMenu = function (parent, chartGroup) {
var SELECT_CSS_CLASS = 'dc-select-menu';
var OPTION_CSS_CLASS = 'dc-select-option';
var _chart = dc.baseMixin({});
var _select;
var _promptText = 'Select all';
var _multiple = false;
var _promptValue = null;
var _numberVisible = null;
var _order = function (a, b) {
return _chart.keyAccessor()(a) > _chart.keyAccessor()(b) ?
1 : _chart.keyAccessor()(b) > _chart.keyAccessor()(a) ?
-1 : 0;
};
var _filterDisplayed = function (d) {
return _chart.valueAccessor()(d) > 0;
};
_chart.data(function (group) {
return group.all().filter(_filterDisplayed);
});
_chart._doRender = function () {
_chart.select('select').remove();
_select = _chart.root().append('select')
.classed(SELECT_CSS_CLASS, true);
_select.append('option').text(_promptText).attr('value', '');
_chart._doRedraw();
return _chart;
};
// Fixing IE 11 crash when redrawing the chart
// see here for list of IE user Agents :
// http://www.useragentstring.com/pages/useragentstring.php?name=Internet+Explorer
var ua = window.navigator.userAgent;
// test for IE 11 but not a lower version (which contains MSIE in UA)
if (ua.indexOf('Trident/') > 0 && ua.indexOf('MSIE') === -1) {
_chart.redraw = _chart.render;
}
_chart._doRedraw = function () {
setAttributes();
renderOptions();
// select the option(s) corresponding to current filter(s)
if (_chart.hasFilter() && _multiple) {
_select.selectAll('option')
.property('selected', function (d) {
return typeof d !== 'undefined' && _chart.filters().indexOf(String(_chart.keyAccessor()(d))) >= 0;
});
} else if (_chart.hasFilter()) {
_select.property('value', _chart.filter());
} else {
_select.property('value', '');
}
return _chart;
};
function renderOptions () {
var options = _select.selectAll('option.' + OPTION_CSS_CLASS)
.data(_chart.data(), function (d) { return _chart.keyAccessor()(d); });
options.enter()
.append('option')
.classed(OPTION_CSS_CLASS, true)
.attr('value', function (d) { return _chart.keyAccessor()(d); });
options.text(_chart.title());
options.exit().remove();
_select.selectAll('option.' + OPTION_CSS_CLASS).sort(_order);
_select.on('change', onChange);
return options;
}
function onChange (d, i) {
var values;
var target = d3.event.target;
if (target.selectedOptions) {
var selectedOptions = Array.prototype.slice.call(target.selectedOptions);
values = selectedOptions.map(function (d) {
return d.value;
});
} else { // IE and other browsers do not support selectedOptions
// adapted from this polyfill: https://gist.github.com/brettz9/4212217
var options = [].slice.call(d3.event.target.options);
values = options.filter(function (option) {
return option.selected;
}).map(function (option) {
return option.value;
});
}
// console.log(values);
// check if only prompt option is selected
if (values.length === 1 && values[0] === '') {
values = _promptValue || null;
} else if (!_multiple && values.length === 1) {
values = values[0];
}
_chart.onChange(values);
}
_chart.onChange = function (val) {
if (val && _multiple) {
_chart.replaceFilter([val]);
} else if (val) {
_chart.replaceFilter(val);
} else {
_chart.filterAll();
}
dc.events.trigger(function () {
_chart.redrawGroup();
});
};
function setAttributes () {
if (_multiple) {
_select.attr('multiple', true);
} else {
_select.attr('multiple', null);
}
if (_numberVisible !== null) {
_select.attr('size', _numberVisible);
} else {
_select.attr('size', null);
}
}
/**
* 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.
* @name order
* @memberof dc.selectMenu
* @instance
* @param {Function} [order]
* @example
* // order by the group's value
* chart.order(function (a,b) {
* return a.value > b.value ? 1 : b.value > a.value ? -1 : 0;
* });
**/
_chart.order = function (order) {
if (!arguments.length) {
return _order;
}
_order = order;
return _chart;
};
/**
* Get or set the text displayed in the options used to prompt selection.
* @name promptText
* @memberof dc.selectMenu
* @instance
* @param {String} [promptText='Select all']
* @example
* chart.promptText('All states');
**/
_chart.promptText = function (_) {
if (!arguments.length) {
return _promptText;
}
_promptText = _;
return _chart;
};
/**
* Get or set the function that filters option tags prior to display. By default options
* with a value of < 1 are not displayed.
* @name filterDisplayed
* @memberof dc.selectMenu
* @instance
* @param {function} [filterDisplayed]
* @example
* // display all options override the `filterDisplayed` function:
* chart.filterDisplayed(function () {
* return true;
* });
**/
_chart.filterDisplayed = function (filterDisplayed) {
if (!arguments.length) {
return _filterDisplayed;
}
_filterDisplayed = filterDisplayed;
return _chart;
};
/**
* Controls the type of select menu. Setting it to true converts the underlying
* HTML tag into a multiple select.
* @name multiple
* @memberof dc.selectMenu
* @instance
* @param {boolean} [multiple=false]
* @example
* chart.multiple(true);
**/
_chart.multiple = function (multiple) {
if (!arguments.length) {
return _multiple;
}
_multiple = multiple;
return _chart;
};
/**
* Controls the default value to be used for
* [dimension.filter](https://github.com/crossfilter/crossfilter/wiki/API-Reference#dimension_filter)
* when only the prompt value is selected. If `null` (the default), no filtering will occur when
* just the prompt is selected.
* @name promptValue
* @memberof dc.selectMenu
* @instance
* @param {?*} [promptValue=null]
**/
_chart.promptValue = function (promptValue) {
if (!arguments.length) {
return _promptValue;
}
_promptValue = promptValue;
return _chart;
};
/**
* Controls the number of items to show in the select menu, when `.multiple()` is true. This
* controls the [`size` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Attributes) of
* the `select` element. If `null` (the default), uses the browser's default height.
* @name numberItems
* @memberof dc.selectMenu
* @instance
* @param {?number} [numberVisible=null]
* @example
* chart.numberVisible(10);
**/
_chart.numberVisible = function (numberVisible) {
if (!arguments.length) {
return _numberVisible;
}
_numberVisible = numberVisible;
return _chart;
};
_chart.size = dc.logger.deprecate(_chart.numberVisible, 'selectMenu.size is ambiguous - use numberVisible instead');
return _chart.anchor(parent, chartGroup);
};
// Renamed functions
dc.abstractBubbleChart = dc.bubbleMixin;
dc.baseChart = dc.baseMixin;
dc.capped = dc.capMixin;
dc.colorChart = dc.colorMixin;
dc.coordinateGridChart = dc.coordinateGridMixin;
dc.marginable = dc.marginMixin;
dc.stackableChart = dc.stackMixin;
// Expose d3 and crossfilter, so that clients in browserify
// case can obtain them if they need them.
dc.d3 = d3;
dc.crossfilter = crossfilter;
return dc;}
if(typeof define === "function" && define.amd) {
define(["d3", "crossfilter2"], _dc);
} else if(typeof module === "object" && module.exports) {
var _d3 = require('d3');
var _crossfilter = require('crossfilter2');
// When using npm + browserify, 'crossfilter' is a function,
// since package.json specifies index.js as main function, and it
// does special handling. When using bower + browserify,
// there's no main in bower.json (in fact, there's no bower.json),
// so we need to fix it.
if (typeof _crossfilter !== "function") {
_crossfilter = _crossfilter.crossfilter;
}
module.exports = _dc(_d3, _crossfilter);
} else {
this.dc = _dc(d3, crossfilter);
}
}
)();
//# sourceMappingURL=dc.js.map