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
|
nv.models.distribution = function() {
"use strict";
//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------
var margin = {top: 0, right: 0, bottom: 0, left: 0}
, width = 400 //technically width or height depending on x or y....
, size = 8
, axis = 'x' // 'x' or 'y'... horizontal or vertical
, getData = function(d) { return d[axis] } // defaults d.x or d.y
, color = nv.utils.defaultColor()
, scale = d3.scale.linear()
, domain
;
//============================================================
//============================================================
// Private Variables
//------------------------------------------------------------
var scale0;
//============================================================
function chart(selection) {
selection.each(function(data) {
var availableLength = width - (axis === 'x' ? margin.left + margin.right : margin.top + margin.bottom),
naxis = axis == 'x' ? 'y' : 'x',
container = d3.select(this);
//------------------------------------------------------------
// Setup Scales
scale0 = scale0 || scale;
//------------------------------------------------------------
//------------------------------------------------------------
// Setup containers and skeleton of chart
var wrap = container.selectAll('g.nv-distribution').data([data]);
var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-distribution');
var gEnter = wrapEnter.append('g');
var g = wrap.select('g');
wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
//------------------------------------------------------------
var distWrap = g.selectAll('g.nv-dist')
.data(function(d) { return d }, function(d) { return d.key });
distWrap.enter().append('g');
distWrap
.attr('class', function(d,i) { return 'nv-dist nv-series-' + i })
.style('stroke', function(d,i) { return color(d, i) });
var dist = distWrap.selectAll('line.nv-dist' + axis)
.data(function(d) { return d.values })
dist.enter().append('line')
.attr(axis + '1', function(d,i) { return scale0(getData(d,i)) })
.attr(axis + '2', function(d,i) { return scale0(getData(d,i)) })
distWrap.exit().selectAll('line.nv-dist' + axis)
.transition()
.attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
.attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
.style('stroke-opacity', 0)
.remove();
dist
.attr('class', function(d,i) { return 'nv-dist' + axis + ' nv-dist' + axis + '-' + i })
.attr(naxis + '1', 0)
.attr(naxis + '2', size);
dist
.transition()
.attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
.attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
scale0 = scale.copy();
});
return chart;
}
//============================================================
// Expose Public Variables
//------------------------------------------------------------
chart.options = nv.utils.optionsFunc.bind(chart);
chart.margin = function(_) {
if (!arguments.length) return margin;
margin.top = typeof _.top != 'undefined' ? _.top : margin.top;
margin.right = typeof _.right != 'undefined' ? _.right : margin.right;
margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
margin.left = typeof _.left != 'undefined' ? _.left : margin.left;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.axis = function(_) {
if (!arguments.length) return axis;
axis = _;
return chart;
};
chart.size = function(_) {
if (!arguments.length) return size;
size = _;
return chart;
};
chart.getData = function(_) {
if (!arguments.length) return getData;
getData = d3.functor(_);
return chart;
};
chart.scale = function(_) {
if (!arguments.length) return scale;
scale = _;
return chart;
};
chart.color = function(_) {
if (!arguments.length) return color;
color = nv.utils.getColor(_);
return chart;
};
//============================================================
return chart;
}
|
