11155 lines
369 KiB
JavaScript
11155 lines
369 KiB
JavaScript
/*!
|
|
* 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;
|
|
};
|
|
|
|
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
|