forked from dc-js/dc.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
paired-row-chart.js
149 lines (120 loc) · 4.32 KB
/
paired-row-chart.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/**
* Concrete paired row chart implementation.
*
* @class pairedRowChart
* @memberof dc
* @mixes dc.rowMixin
* @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.pairedRowChart('#chart-container1');
* // create a row chart under #chart-container2 element using chart group A
* var chart2 = dc.pairedRowChart('#chart-container2', 'chartGroupA');
* @param {String|node|d3.selection} parent - Any valid
* {@link https://github.com/mbostock/d3/wiki/Selections#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.
* @return {dc.pairedRowChart}
*/
dc.pairedRowChart = function (parent, chartGroup) {
var _chart = dc.rowMixin(parent, chartGroup);
var _rowCssClass = 'row';
var _gLeft;
var _gRight;
// we need a way to know which data belongs on the left chart and which data belongs on the right
var _leftKeyFilter = function (d) {
return d.key[0];
};
var _rightKeyFilter = function (d) {
return d.key[0];
};
/**
#### .leftKeyFilter([value]) - **mandatory**
Set or get the left key filter attribute of a chart.
For example
function(d) {
return d.key[0] === 'Male';
}
If a value is given, then it will be used as the new left key filter. If no value is specified then
the current left key filter will be returned.
**/
_chart.leftKeyFilter = function (_) {
if (!arguments.length) {
return _leftKeyFilter;
}
_leftKeyFilter = _;
return _chart;
};
/**
#### .rightKeyFilter([value]) - **mandatory**
Set or get the right key filter attribute of a chart.
For example
function(d) {
return d.key[0] === 'Female';
}
If a value is given, then it will be used as the new right key filter. If no value is specified then
the current right key filter will be returned.
**/
_chart.rightKeyFilter = function (_) {
if (!arguments.length) {
return _rightKeyFilter;
}
_rightKeyFilter = _;
return _chart;
};
_chart._doRender = function () {
_chart.resetSvg();
var _g = _chart.svg()
.append('g')
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
_chart.g(_g);
_gLeft = _g
.append('g')
.attr('transform', 'translate(0, 0)')
.attr('class', 'dc-paired-row-left');
_gRight = _g
.append('g')
.attr('transform', 'translate(' + _chart.axisWidth() + ', 0)')
.attr('class', 'dc-paired-row-right');
_chart._drawChart();
return _chart;
};
_chart.axisWidth = function() {
return _chart.effectiveWidth() / 2;
};
_chart._drawChart = function () {
_chart.useRightYAxis(true);
_chart._drawChartLeft();
_chart.useRightYAxis(false);
_chart._drawChartRight();
};
_chart._drawChartLeft = function () {
var data = _chart.data().filter(function (d) {
return _chart.leftKeyFilter()(d);
});
_chart._drawAxis(_gLeft);
_chart._drawGridLines(_gLeft);
var rowsLeft = _gLeft.selectAll('g.' + _rowCssClass).data(data);
_chart._createElements(rowsLeft);
_chart._removeElements(rowsLeft);
_chart._updateElements(rowsLeft);
};
_chart._drawChartRight = function () {
var data = _chart.data().filter(function (d) {
return _chart.rightKeyFilter()(d);
});
dc.transition(_gRight, _chart.transitionDuration())
.attr('transform', 'translate(' + _chart.axisWidth() + ', 0)');
_chart._drawAxis(_gRight);
_chart._drawGridLines(_gRight);
var rowsRight = _gRight.selectAll('g.' + _rowCssClass).data(data);
_chart._createElements(rowsRight);
_chart._removeElements(rowsRight);
_chart._updateElements(rowsRight);
};
return _chart;
};