mpld3 0.5.2 → 0.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mpld3.v0.5.6.min.js +19298 -0
- package/mpld3.v0.5.6.js +2079 -0
- package/mpld3.v0.5.6.min.js +2 -0
- package/package.json +3 -3
- package/dist/mpld3.v0.5.2.min.js +0 -6
- package/mpld3.v0.5.2.js +0 -1820
- package/mpld3.v0.5.2.min.js +0 -2
package/mpld3.v0.5.2.js
DELETED
|
@@ -1,1820 +0,0 @@
|
|
|
1
|
-
!function(d3) {
|
|
2
|
-
var mpld3 = {
|
|
3
|
-
_mpld3IsLoaded: true,
|
|
4
|
-
figures: [],
|
|
5
|
-
plugin_map: {}
|
|
6
|
-
};
|
|
7
|
-
mpld3.version = "0.5.2";
|
|
8
|
-
mpld3.register_plugin = function(name, obj) {
|
|
9
|
-
mpld3.plugin_map[name] = obj;
|
|
10
|
-
};
|
|
11
|
-
mpld3.remove_figure = function(figid) {
|
|
12
|
-
var element = document.getElementById(figid);
|
|
13
|
-
if (element !== null) {
|
|
14
|
-
element.innerHTML = "";
|
|
15
|
-
}
|
|
16
|
-
for (var i = 0; i < mpld3.figures.length; i++) {
|
|
17
|
-
var fig = mpld3.figures[i];
|
|
18
|
-
if (fig.figid === figid) {
|
|
19
|
-
mpld3.figures.splice(i, 1);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
return true;
|
|
23
|
-
};
|
|
24
|
-
mpld3.draw_figure = function(figid, spec, process, clearElem) {
|
|
25
|
-
var element = document.getElementById(figid);
|
|
26
|
-
clearElem = typeof clearElem !== "undefined" ? clearElem : false;
|
|
27
|
-
if (clearElem) {
|
|
28
|
-
mpld3.remove_figure(figid);
|
|
29
|
-
}
|
|
30
|
-
if (element === null) {
|
|
31
|
-
throw figid + " is not a valid id";
|
|
32
|
-
}
|
|
33
|
-
var fig = new mpld3.Figure(figid, spec);
|
|
34
|
-
if (process) {
|
|
35
|
-
process(fig, element);
|
|
36
|
-
}
|
|
37
|
-
mpld3.figures.push(fig);
|
|
38
|
-
fig.draw();
|
|
39
|
-
return fig;
|
|
40
|
-
};
|
|
41
|
-
mpld3.cloneObj = mpld3_cloneObj;
|
|
42
|
-
function mpld3_cloneObj(oldObj) {
|
|
43
|
-
var newObj = {};
|
|
44
|
-
for (var key in oldObj) {
|
|
45
|
-
newObj[key] = oldObj[key];
|
|
46
|
-
}
|
|
47
|
-
return newObj;
|
|
48
|
-
}
|
|
49
|
-
mpld3.boundsToTransform = function(fig, bounds) {
|
|
50
|
-
var width = fig.width;
|
|
51
|
-
var height = fig.height;
|
|
52
|
-
var dx = bounds[1][0] - bounds[0][0];
|
|
53
|
-
var dy = bounds[1][1] - bounds[0][1];
|
|
54
|
-
var x = (bounds[0][0] + bounds[1][0]) / 2;
|
|
55
|
-
var y = (bounds[0][1] + bounds[1][1]) / 2;
|
|
56
|
-
var scale = Math.max(1, Math.min(8, .9 / Math.max(dx / width, dy / height)));
|
|
57
|
-
var translate = [ width / 2 - scale * x, height / 2 - scale * y ];
|
|
58
|
-
return {
|
|
59
|
-
translate: translate,
|
|
60
|
-
scale: scale
|
|
61
|
-
};
|
|
62
|
-
};
|
|
63
|
-
mpld3.getTransformation = function(transform) {
|
|
64
|
-
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
65
|
-
g.setAttributeNS(null, "transform", transform);
|
|
66
|
-
var matrix = g.transform.baseVal.consolidate().matrix;
|
|
67
|
-
var a = matrix.a, b = matrix.b, c = matrix.c, d = matrix.d, e = matrix.e, f = matrix.f;
|
|
68
|
-
var scaleX, scaleY, skewX;
|
|
69
|
-
if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX;
|
|
70
|
-
if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX;
|
|
71
|
-
if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY;
|
|
72
|
-
if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX;
|
|
73
|
-
var transformObj = {
|
|
74
|
-
translateX: e,
|
|
75
|
-
translateY: f,
|
|
76
|
-
rotate: Math.atan2(b, a) * 180 / Math.PI,
|
|
77
|
-
skewX: Math.atan(skewX) * 180 / Math.PI,
|
|
78
|
-
scaleX: scaleX,
|
|
79
|
-
scaleY: scaleY
|
|
80
|
-
};
|
|
81
|
-
var transformStr = "" + "translate(" + transformObj.translateX + "," + transformObj.translateY + ")" + "rotate(" + transformObj.rotate + ")" + "skewX(" + transformObj.skewX + ")" + "scale(" + transformObj.scaleX + "," + transformObj.scaleY + ")";
|
|
82
|
-
return transformStr;
|
|
83
|
-
};
|
|
84
|
-
mpld3.merge_objects = function(_) {
|
|
85
|
-
var output = {};
|
|
86
|
-
var obj;
|
|
87
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
88
|
-
obj = arguments[i];
|
|
89
|
-
for (var attr in obj) {
|
|
90
|
-
output[attr] = obj[attr];
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
return output;
|
|
94
|
-
};
|
|
95
|
-
mpld3.generate_id = function(N, chars) {
|
|
96
|
-
console.warn("mpld3.generate_id is deprecated. " + "Use mpld3.generateId instead.");
|
|
97
|
-
return mpld3_generateId(N, chars);
|
|
98
|
-
};
|
|
99
|
-
mpld3.generateId = mpld3_generateId;
|
|
100
|
-
function mpld3_generateId(N, chars) {
|
|
101
|
-
N = typeof N !== "undefined" ? N : 10;
|
|
102
|
-
chars = typeof chars !== "undefined" ? chars : "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
|
103
|
-
var id = chars.charAt(Math.round(Math.random() * (chars.length - 11)));
|
|
104
|
-
for (var i = 1; i < N; i++) id += chars.charAt(Math.round(Math.random() * (chars.length - 1)));
|
|
105
|
-
return id;
|
|
106
|
-
}
|
|
107
|
-
mpld3.get_element = function(id, fig) {
|
|
108
|
-
var figs_to_search, ax, el;
|
|
109
|
-
if (typeof fig === "undefined") {
|
|
110
|
-
figs_to_search = mpld3.figures;
|
|
111
|
-
} else if (typeof fig.length === "undefined") {
|
|
112
|
-
figs_to_search = [ fig ];
|
|
113
|
-
} else {
|
|
114
|
-
figs_to_search = fig;
|
|
115
|
-
}
|
|
116
|
-
for (var i = 0; i < figs_to_search.length; i++) {
|
|
117
|
-
fig = figs_to_search[i];
|
|
118
|
-
if (fig.props.id === id) {
|
|
119
|
-
return fig;
|
|
120
|
-
}
|
|
121
|
-
for (var j = 0; j < fig.axes.length; j++) {
|
|
122
|
-
ax = fig.axes[j];
|
|
123
|
-
if (ax.props.id === id) {
|
|
124
|
-
return ax;
|
|
125
|
-
}
|
|
126
|
-
for (var k = 0; k < ax.elements.length; k++) {
|
|
127
|
-
el = ax.elements[k];
|
|
128
|
-
if (el.props.id === id) {
|
|
129
|
-
return el;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
return null;
|
|
135
|
-
};
|
|
136
|
-
mpld3.insert_css = function(selector, attributes) {
|
|
137
|
-
var head = document.head || document.getElementsByTagName("head")[0];
|
|
138
|
-
var style = document.createElement("style");
|
|
139
|
-
var css = selector + " {";
|
|
140
|
-
for (var prop in attributes) {
|
|
141
|
-
css += prop + ":" + attributes[prop] + "; ";
|
|
142
|
-
}
|
|
143
|
-
css += "}";
|
|
144
|
-
style.type = "text/css";
|
|
145
|
-
if (style.styleSheet) {
|
|
146
|
-
style.styleSheet.cssText = css;
|
|
147
|
-
} else {
|
|
148
|
-
style.appendChild(document.createTextNode(css));
|
|
149
|
-
}
|
|
150
|
-
head.appendChild(style);
|
|
151
|
-
};
|
|
152
|
-
mpld3.process_props = function(obj, properties, defaults, required) {
|
|
153
|
-
console.warn("mpld3.process_props is deprecated. " + "Plot elements should derive from mpld3.PlotElement");
|
|
154
|
-
Element.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
155
|
-
Element.prototype.constructor = Element;
|
|
156
|
-
Element.prototype.requiredProps = required;
|
|
157
|
-
Element.prototype.defaultProps = defaults;
|
|
158
|
-
function Element(props) {
|
|
159
|
-
mpld3_PlotElement.call(this, null, props);
|
|
160
|
-
}
|
|
161
|
-
var el = new Element(properties);
|
|
162
|
-
return el.props;
|
|
163
|
-
};
|
|
164
|
-
mpld3.interpolateDates = mpld3_interpolateDates;
|
|
165
|
-
function mpld3_interpolateDates(a, b) {
|
|
166
|
-
var interp = d3.interpolate([ a[0].valueOf(), a[1].valueOf() ], [ b[0].valueOf(), b[1].valueOf() ]);
|
|
167
|
-
return function(t) {
|
|
168
|
-
var i = interp(t);
|
|
169
|
-
return [ new Date(i[0]), new Date(i[1]) ];
|
|
170
|
-
};
|
|
171
|
-
}
|
|
172
|
-
function isUndefined(x) {
|
|
173
|
-
return typeof x === "undefined";
|
|
174
|
-
}
|
|
175
|
-
function isUndefinedOrNull(x) {
|
|
176
|
-
return x == null || isUndefined(x);
|
|
177
|
-
}
|
|
178
|
-
function getMod(L, i) {
|
|
179
|
-
return L.length > 0 ? L[i % L.length] : null;
|
|
180
|
-
}
|
|
181
|
-
mpld3.path = function() {
|
|
182
|
-
return mpld3_path();
|
|
183
|
-
};
|
|
184
|
-
function mpld3_path(_) {
|
|
185
|
-
var x = function(d, i) {
|
|
186
|
-
return d[0];
|
|
187
|
-
};
|
|
188
|
-
var y = function(d, i) {
|
|
189
|
-
return d[1];
|
|
190
|
-
};
|
|
191
|
-
var defined = function(d, i) {
|
|
192
|
-
return true;
|
|
193
|
-
};
|
|
194
|
-
var n_vertices = {
|
|
195
|
-
M: 1,
|
|
196
|
-
m: 1,
|
|
197
|
-
L: 1,
|
|
198
|
-
l: 1,
|
|
199
|
-
Q: 2,
|
|
200
|
-
q: 2,
|
|
201
|
-
T: 1,
|
|
202
|
-
t: 1,
|
|
203
|
-
S: 2,
|
|
204
|
-
s: 2,
|
|
205
|
-
C: 3,
|
|
206
|
-
c: 3,
|
|
207
|
-
Z: 0,
|
|
208
|
-
z: 0
|
|
209
|
-
};
|
|
210
|
-
function path(vertices, pathcodes) {
|
|
211
|
-
var functor = function(x) {
|
|
212
|
-
if (typeof x == "function") {
|
|
213
|
-
return x;
|
|
214
|
-
}
|
|
215
|
-
return function() {
|
|
216
|
-
return x;
|
|
217
|
-
};
|
|
218
|
-
};
|
|
219
|
-
var fx = functor(x), fy = functor(y);
|
|
220
|
-
var points = [], segments = [], i_v = 0, i_c = -1, halt = 0, nullpath = false;
|
|
221
|
-
if (!pathcodes) {
|
|
222
|
-
pathcodes = [ "M" ];
|
|
223
|
-
for (var i = 1; i < vertices.length; i++) pathcodes.push("L");
|
|
224
|
-
}
|
|
225
|
-
while (++i_c < pathcodes.length) {
|
|
226
|
-
halt = i_v + n_vertices[pathcodes[i_c]];
|
|
227
|
-
points = [];
|
|
228
|
-
while (i_v < halt) {
|
|
229
|
-
if (defined.call(this, vertices[i_v], i_v)) {
|
|
230
|
-
points.push(fx.call(this, vertices[i_v], i_v), fy.call(this, vertices[i_v], i_v));
|
|
231
|
-
i_v++;
|
|
232
|
-
} else {
|
|
233
|
-
points = null;
|
|
234
|
-
i_v = halt;
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
if (!points) {
|
|
238
|
-
nullpath = true;
|
|
239
|
-
} else if (nullpath && points.length > 0) {
|
|
240
|
-
segments.push("M", points[0], points[1]);
|
|
241
|
-
nullpath = false;
|
|
242
|
-
} else {
|
|
243
|
-
segments.push(pathcodes[i_c]);
|
|
244
|
-
segments = segments.concat(points);
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
if (i_v != vertices.length) console.warn("Warning: not all vertices used in Path");
|
|
248
|
-
return segments.join(" ");
|
|
249
|
-
}
|
|
250
|
-
path.x = function(_) {
|
|
251
|
-
if (!arguments.length) return x;
|
|
252
|
-
x = _;
|
|
253
|
-
return path;
|
|
254
|
-
};
|
|
255
|
-
path.y = function(_) {
|
|
256
|
-
if (!arguments.length) return y;
|
|
257
|
-
y = _;
|
|
258
|
-
return path;
|
|
259
|
-
};
|
|
260
|
-
path.defined = function(_) {
|
|
261
|
-
if (!arguments.length) return defined;
|
|
262
|
-
defined = _;
|
|
263
|
-
return path;
|
|
264
|
-
};
|
|
265
|
-
path.call = path;
|
|
266
|
-
return path;
|
|
267
|
-
}
|
|
268
|
-
mpld3.multiscale = mpld3_multiscale;
|
|
269
|
-
function mpld3_multiscale(_) {
|
|
270
|
-
var args = Array.prototype.slice.call(arguments, 0);
|
|
271
|
-
var N = args.length;
|
|
272
|
-
function scale(x) {
|
|
273
|
-
args.forEach(function(mapping) {
|
|
274
|
-
x = mapping(x);
|
|
275
|
-
});
|
|
276
|
-
return x;
|
|
277
|
-
}
|
|
278
|
-
scale.domain = function(x) {
|
|
279
|
-
if (!arguments.length) return args[0].domain();
|
|
280
|
-
args[0].domain(x);
|
|
281
|
-
return scale;
|
|
282
|
-
};
|
|
283
|
-
scale.range = function(x) {
|
|
284
|
-
if (!arguments.length) return args[N - 1].range();
|
|
285
|
-
args[N - 1].range(x);
|
|
286
|
-
return scale;
|
|
287
|
-
};
|
|
288
|
-
scale.step = function(i) {
|
|
289
|
-
return args[i];
|
|
290
|
-
};
|
|
291
|
-
return scale;
|
|
292
|
-
}
|
|
293
|
-
mpld3.icons = {
|
|
294
|
-
reset: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI\nWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gIcACMoD/OzIwAAAJhJREFUOMtjYKAx4KDUgNsMDAx7\nyNV8i4GB4T8U76VEM8mGYNNMtCH4NBM0hBjNMIwSsMzQ0MamcDkDA8NmQi6xggpUoikwQbIkHk2u\nE0rLI7vCBknBSyxeRDZAE6qHgQkq+ZeBgYERSfFPAoHNDNUDN4BswIRmKgxwEasP2dlsDAwMYlA/\n/mVgYHiBpkkGKscIDaPfVMmuAGnOTaGsXF0MAAAAAElFTkSuQmCC\n",
|
|
295
|
-
move: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI\nWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gIcACQMfLHBNQAAANZJREFUOMud07FKA0EQBuAviaKB\nlFr7COJrpAyYRlKn8hECEkFEn8ROCCm0sBMRYgh5EgVFtEhsRjiO27vkBoZd/vn5d3b+XcrjFI9q\nxgXWkc8pUjOB93GMd3zgB9d1unjDSxmhWSHQqOJki+MtOuv/b3ZifUqctIrMxwhHuG1gim4Ma5kR\nWuEkXFgU4B0MW1Ho4TeyjX3s4TDq3zn8ALvZ7q5wX9DqLOHCDA95cFBAnOO1AL/ZdNopgY3fQcqF\nyriMe37hM9w521ZkkvlMo7o/8g7nZYQ/QDctp1nTCf0AAAAASUVORK5CYII=\n",
|
|
296
|
-
zoom: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI\nWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMPDiIRPL/2oQAAANBJREFUOMvF0b9KgzEcheHHVnCT\nKoI4uXbtLXgB3oJDJxevw1VwkoJ/NjepQ2/BrZRCx0ILFURQKV2kyOeSQpAmn7WDB0Lg955zEhLy\n2scdXlBggits+4WOQqjAJ3qYR7NGLrwXGU9+sGbEtlIF18FwmuBngZ+nCt6CIacC3Rx8LSl4xzgF\nn0tusBn4UyVhuA/7ZYIv5g+pE3ail25hN/qdmzCfpsJVjKKCZesDBwtzrAqGOMQj6vhCDRsY4ALH\nmOVObltR/xeG/jph6OD2r+Fv5lZBWEhMx58AAAAASUVORK5CYII=\n",
|
|
297
|
-
brush: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI\nWXMAAEQkAABEJAFAZ8RUAAAAB3RJTUUH3gMCEiQKB9YaAgAAAWtJREFUOMuN0r1qVVEQhuFn700k\nnfEvBq0iNiIiOKXgH4KCaBeIhWARK/EibLwFCwVLjyAWaQzRGG9grC3URkHUBKKgRuWohWvL5pjj\nyTSLxcz7rZlZHyMiItqzFxGTEVF18/UoODNFxDIO4x12dkXqTcBPsCUzD+AK3ndFqhHwEsYz82gn\nN4dbmMRK9R/4KY7jAvbiWmYeHBT5Z4QCP8J1rGAeN3GvU3Mbl/Gq3qCDcxjLzOV+v78fq/iFIxFx\nPyJ2lNJpfBy2g59YzMyzEbEVLzGBJjOriLiBq5gaJrCIU3hcRCbwAtuwjm/Yg/V6I9NgDA1OR8RC\nZq6Vcd7iUwtn5h8fdMBdETGPE+Xe4ExELDRNs4bX2NfCUHe+7UExyfkCP8MhzOA7PuAkvrbwXyNF\nxF3MDqxiqlhXC7SPdaOKiN14g0u4g3H0MvOiTUSNY3iemb0ywmfMdfYyUmAJ2yPiBx6Wr/oy2Oqw\n+A1SupBzAOuE/AAAAABJRU5ErkJggg==\n"
|
|
298
|
-
};
|
|
299
|
-
mpld3.Grid = mpld3_Grid;
|
|
300
|
-
mpld3_Grid.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
301
|
-
mpld3_Grid.prototype.constructor = mpld3_Grid;
|
|
302
|
-
mpld3_Grid.prototype.requiredProps = [ "xy" ];
|
|
303
|
-
mpld3_Grid.prototype.defaultProps = {
|
|
304
|
-
color: "gray",
|
|
305
|
-
dasharray: "2,2",
|
|
306
|
-
alpha: "0.5",
|
|
307
|
-
nticks: 10,
|
|
308
|
-
gridOn: true,
|
|
309
|
-
tickvalues: null,
|
|
310
|
-
zorder: 0
|
|
311
|
-
};
|
|
312
|
-
function mpld3_Grid(ax, prop) {
|
|
313
|
-
mpld3_PlotElement.call(this, ax, prop);
|
|
314
|
-
this.cssclass = "mpld3-" + this.props.xy + "grid";
|
|
315
|
-
if (this.props.xy == "x") {
|
|
316
|
-
this.transform = "translate(0," + this.ax.height + ")";
|
|
317
|
-
this.position = "bottom";
|
|
318
|
-
this.scale = this.ax.xdom;
|
|
319
|
-
this.tickSize = -this.ax.height;
|
|
320
|
-
} else if (this.props.xy == "y") {
|
|
321
|
-
this.transform = "translate(0,0)";
|
|
322
|
-
this.position = "left";
|
|
323
|
-
this.scale = this.ax.ydom;
|
|
324
|
-
this.tickSize = -this.ax.width;
|
|
325
|
-
} else {
|
|
326
|
-
throw "unrecognized grid xy specifier: should be 'x' or 'y'";
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
mpld3_Grid.prototype.draw = function() {
|
|
330
|
-
var scaleMethod = {
|
|
331
|
-
left: "axisLeft",
|
|
332
|
-
right: "axisRight",
|
|
333
|
-
top: "axisTop",
|
|
334
|
-
bottom: "axisBottom"
|
|
335
|
-
}[this.position];
|
|
336
|
-
this.grid = d3[scaleMethod](this.scale).ticks(this.props.nticks).tickValues(this.props.tickvalues).tickSize(this.tickSize, 0, 0).tickFormat("");
|
|
337
|
-
this.elem = this.ax.axes.append("g").attr("class", this.cssclass).attr("transform", this.transform).call(this.grid);
|
|
338
|
-
mpld3.insert_css("div#" + this.ax.fig.figid + " ." + this.cssclass + " .tick", {
|
|
339
|
-
stroke: this.props.color,
|
|
340
|
-
"stroke-dasharray": this.props.dasharray,
|
|
341
|
-
"stroke-opacity": this.props.alpha
|
|
342
|
-
});
|
|
343
|
-
mpld3.insert_css("div#" + this.ax.fig.figid + " ." + this.cssclass + " path", {
|
|
344
|
-
"stroke-width": 0
|
|
345
|
-
});
|
|
346
|
-
mpld3.insert_css("div#" + this.ax.fig.figid + " ." + this.cssclass + " .domain", {
|
|
347
|
-
"pointer-events": "none"
|
|
348
|
-
});
|
|
349
|
-
};
|
|
350
|
-
mpld3_Grid.prototype.zoomed = function(transform) {
|
|
351
|
-
if (transform) {
|
|
352
|
-
if (this.props.xy == "x") {
|
|
353
|
-
this.elem.call(this.grid.scale(transform.rescaleX(this.scale)));
|
|
354
|
-
} else {
|
|
355
|
-
this.elem.call(this.grid.scale(transform.rescaleY(this.scale)));
|
|
356
|
-
}
|
|
357
|
-
} else {
|
|
358
|
-
this.elem.call(this.grid);
|
|
359
|
-
}
|
|
360
|
-
};
|
|
361
|
-
mpld3.Axis = mpld3_Axis;
|
|
362
|
-
mpld3_Axis.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
363
|
-
mpld3_Axis.prototype.constructor = mpld3_Axis;
|
|
364
|
-
mpld3_Axis.prototype.requiredProps = [ "position" ];
|
|
365
|
-
mpld3_Axis.prototype.defaultProps = {
|
|
366
|
-
nticks: 10,
|
|
367
|
-
tickvalues: null,
|
|
368
|
-
tickformat: null,
|
|
369
|
-
filtered_tickvalues: null,
|
|
370
|
-
filtered_tickformat: null,
|
|
371
|
-
tickformat_formatter: null,
|
|
372
|
-
fontsize: "11px",
|
|
373
|
-
fontcolor: "black",
|
|
374
|
-
axiscolor: "black",
|
|
375
|
-
scale: "linear",
|
|
376
|
-
grid: {},
|
|
377
|
-
zorder: 0,
|
|
378
|
-
visible: true
|
|
379
|
-
};
|
|
380
|
-
function mpld3_Axis(ax, props) {
|
|
381
|
-
mpld3_PlotElement.call(this, ax, props);
|
|
382
|
-
var trans = {
|
|
383
|
-
bottom: [ 0, this.ax.height ],
|
|
384
|
-
top: [ 0, 0 ],
|
|
385
|
-
left: [ 0, 0 ],
|
|
386
|
-
right: [ this.ax.width, 0 ]
|
|
387
|
-
};
|
|
388
|
-
var xy = {
|
|
389
|
-
bottom: "x",
|
|
390
|
-
top: "x",
|
|
391
|
-
left: "y",
|
|
392
|
-
right: "y"
|
|
393
|
-
};
|
|
394
|
-
this.ax = ax;
|
|
395
|
-
this.transform = "translate(" + trans[this.props.position] + ")";
|
|
396
|
-
this.props.xy = xy[this.props.position];
|
|
397
|
-
this.cssclass = "mpld3-" + this.props.xy + "axis";
|
|
398
|
-
this.scale = this.ax[this.props.xy + "dom"];
|
|
399
|
-
this.tickNr = null;
|
|
400
|
-
this.tickFormat = null;
|
|
401
|
-
}
|
|
402
|
-
mpld3_Axis.prototype.getGrid = function() {
|
|
403
|
-
var gridprop = {
|
|
404
|
-
nticks: this.props.nticks,
|
|
405
|
-
zorder: this.props.zorder,
|
|
406
|
-
tickvalues: null,
|
|
407
|
-
xy: this.props.xy
|
|
408
|
-
};
|
|
409
|
-
if (this.props.grid) {
|
|
410
|
-
for (var key in this.props.grid) {
|
|
411
|
-
gridprop[key] = this.props.grid[key];
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
return new mpld3_Grid(this.ax, gridprop);
|
|
415
|
-
};
|
|
416
|
-
mpld3_Axis.prototype.wrapTicks = function() {
|
|
417
|
-
function wrap(text, width, lineHeight) {
|
|
418
|
-
lineHeight = lineHeight || 1.2;
|
|
419
|
-
text.each(function() {
|
|
420
|
-
var text = d3.select(this);
|
|
421
|
-
var bbox = text.node().getBBox();
|
|
422
|
-
var textHeight = bbox.height;
|
|
423
|
-
var words = text.text().split(/\s+/).reverse();
|
|
424
|
-
var word;
|
|
425
|
-
var line = [];
|
|
426
|
-
var lineNumber = 0;
|
|
427
|
-
var y = text.attr("y");
|
|
428
|
-
var dy = textHeight;
|
|
429
|
-
var tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy);
|
|
430
|
-
while (word = words.pop()) {
|
|
431
|
-
line.push(word);
|
|
432
|
-
tspan.text(line.join(" "));
|
|
433
|
-
if (tspan.node().getComputedTextLength() > width) {
|
|
434
|
-
line.pop();
|
|
435
|
-
tspan.text(line.join(" "));
|
|
436
|
-
line = [ word ];
|
|
437
|
-
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * (textHeight * lineHeight) + dy).text(word);
|
|
438
|
-
}
|
|
439
|
-
}
|
|
440
|
-
});
|
|
441
|
-
}
|
|
442
|
-
var TEXT_WIDTH = 80;
|
|
443
|
-
if (this.props.xy == "x") {
|
|
444
|
-
this.elem.selectAll("text").call(wrap, TEXT_WIDTH);
|
|
445
|
-
}
|
|
446
|
-
};
|
|
447
|
-
mpld3_Axis.prototype.draw = function() {
|
|
448
|
-
var scale = this.props.xy === "x" ? this.parent.props.xscale : this.parent.props.yscale;
|
|
449
|
-
if (scale === "date" && this.props.tickvalues) {
|
|
450
|
-
var domain = this.props.xy === "x" ? this.parent.x.domain() : this.parent.y.domain();
|
|
451
|
-
var range = this.props.xy === "x" ? this.parent.xdom.domain() : this.parent.ydom.domain();
|
|
452
|
-
var ordinal_to_js_date = d3.scaleLinear().domain(domain).range(range);
|
|
453
|
-
this.props.tickvalues = this.props.tickvalues.map(function(value) {
|
|
454
|
-
return new Date(ordinal_to_js_date(value));
|
|
455
|
-
});
|
|
456
|
-
}
|
|
457
|
-
var scaleMethod = {
|
|
458
|
-
left: "axisLeft",
|
|
459
|
-
right: "axisRight",
|
|
460
|
-
top: "axisTop",
|
|
461
|
-
bottom: "axisBottom"
|
|
462
|
-
}[this.props.position];
|
|
463
|
-
this.axis = d3[scaleMethod](this.scale);
|
|
464
|
-
var that = this;
|
|
465
|
-
this.filter_ticks(this.axis.scale().domain());
|
|
466
|
-
if (this.props.tickformat_formatter == "index") {
|
|
467
|
-
this.axis = this.axis.tickFormat(function(d, i) {
|
|
468
|
-
return that.props.filtered_tickformat[d];
|
|
469
|
-
});
|
|
470
|
-
} else if (this.props.tickformat_formatter == "percent") {
|
|
471
|
-
this.axis = this.axis.tickFormat(function(d, i) {
|
|
472
|
-
var value = d / that.props.tickformat.xmax * 100;
|
|
473
|
-
var decimals = that.props.tickformat.decimals || 0;
|
|
474
|
-
var formatted_string = d3.format("." + decimals + "f")(value);
|
|
475
|
-
return formatted_string + that.props.tickformat.symbol;
|
|
476
|
-
});
|
|
477
|
-
} else if (this.props.tickformat_formatter == "str_method") {
|
|
478
|
-
this.axis = this.axis.tickFormat(function(d, i) {
|
|
479
|
-
var formatted_string = d3.format(that.props.tickformat.format_string)(d);
|
|
480
|
-
return that.props.tickformat.prefix + formatted_string + that.props.tickformat.suffix;
|
|
481
|
-
});
|
|
482
|
-
} else if (this.props.tickformat_formatter == "fixed") {
|
|
483
|
-
this.axis = this.axis.tickFormat(function(d, i) {
|
|
484
|
-
return that.props.filtered_tickformat[i];
|
|
485
|
-
});
|
|
486
|
-
} else if (this.tickFormat) {
|
|
487
|
-
this.axis = this.axis.tickFormat(this.tickFormat);
|
|
488
|
-
}
|
|
489
|
-
if (this.tickNr) {
|
|
490
|
-
this.axis = this.axis.ticks(this.tickNr);
|
|
491
|
-
}
|
|
492
|
-
this.axis = this.axis.tickValues(this.props.filtered_tickvalues);
|
|
493
|
-
this.elem = this.ax.baseaxes.append("g").attr("transform", this.transform).attr("class", this.cssclass).call(this.axis);
|
|
494
|
-
this.wrapTicks();
|
|
495
|
-
mpld3.insert_css("div#" + this.ax.fig.figid + " ." + this.cssclass + " line, " + " ." + this.cssclass + " path", {
|
|
496
|
-
"shape-rendering": "crispEdges",
|
|
497
|
-
stroke: this.props.axiscolor,
|
|
498
|
-
fill: "none"
|
|
499
|
-
});
|
|
500
|
-
mpld3.insert_css("div#" + this.ax.fig.figid + " ." + this.cssclass + " text", {
|
|
501
|
-
"font-family": "sans-serif",
|
|
502
|
-
"font-size": this.props.fontsize + "px",
|
|
503
|
-
fill: this.props.fontcolor,
|
|
504
|
-
stroke: "none"
|
|
505
|
-
});
|
|
506
|
-
};
|
|
507
|
-
mpld3_Axis.prototype.zoomed = function(transform) {
|
|
508
|
-
this.filter_ticks(this.axis.scale().domain());
|
|
509
|
-
this.axis = this.axis.tickValues(this.props.filtered_tickvalues);
|
|
510
|
-
if (transform) {
|
|
511
|
-
if (this.props.xy == "x") {
|
|
512
|
-
this.elem.call(this.axis.scale(transform.rescaleX(this.scale)));
|
|
513
|
-
} else {
|
|
514
|
-
this.elem.call(this.axis.scale(transform.rescaleY(this.scale)));
|
|
515
|
-
}
|
|
516
|
-
this.wrapTicks();
|
|
517
|
-
} else {
|
|
518
|
-
this.elem.call(this.axis);
|
|
519
|
-
}
|
|
520
|
-
};
|
|
521
|
-
mpld3_Axis.prototype.setTicks = function(nr, format) {
|
|
522
|
-
this.tickNr = nr;
|
|
523
|
-
this.tickFormat = format;
|
|
524
|
-
};
|
|
525
|
-
mpld3_Axis.prototype.filter_ticks = function(domain) {
|
|
526
|
-
if (this.props.tickvalues) {
|
|
527
|
-
const that = this;
|
|
528
|
-
const filteredTickIndices = this.props.tickvalues.map(function(d, i) {
|
|
529
|
-
return i;
|
|
530
|
-
}).filter(function(d, i) {
|
|
531
|
-
const v = that.props.tickvalues[d];
|
|
532
|
-
return v >= domain[0] && v <= domain[1];
|
|
533
|
-
});
|
|
534
|
-
this.props.filtered_tickvalues = this.props.tickvalues.filter(function(d, i) {
|
|
535
|
-
return filteredTickIndices.includes(i);
|
|
536
|
-
});
|
|
537
|
-
if (this.props.tickformat) {
|
|
538
|
-
this.props.filtered_tickformat = this.props.tickformat.filter(function(d, i) {
|
|
539
|
-
return filteredTickIndices.includes(i);
|
|
540
|
-
});
|
|
541
|
-
} else {
|
|
542
|
-
this.props.filtered_tickformat = this.props.tickformat;
|
|
543
|
-
}
|
|
544
|
-
} else {
|
|
545
|
-
this.props.filtered_tickvalues = this.props.tickvalues;
|
|
546
|
-
this.props.filtered_tickformat = this.props.tickformat;
|
|
547
|
-
}
|
|
548
|
-
};
|
|
549
|
-
mpld3.Coordinates = mpld3_Coordinates;
|
|
550
|
-
function mpld3_Coordinates(trans, ax) {
|
|
551
|
-
this.trans = trans;
|
|
552
|
-
if (typeof ax === "undefined") {
|
|
553
|
-
this.ax = null;
|
|
554
|
-
this.fig = null;
|
|
555
|
-
if (this.trans !== "display") throw "ax must be defined if transform != 'display'";
|
|
556
|
-
} else {
|
|
557
|
-
this.ax = ax;
|
|
558
|
-
this.fig = ax.fig;
|
|
559
|
-
}
|
|
560
|
-
this.zoomable = this.trans === "data";
|
|
561
|
-
this.x = this["x_" + this.trans];
|
|
562
|
-
this.y = this["y_" + this.trans];
|
|
563
|
-
if (typeof this.x === "undefined" || typeof this.y === "undefined") throw "unrecognized coordinate code: " + this.trans;
|
|
564
|
-
}
|
|
565
|
-
mpld3_Coordinates.prototype.xy = function(d, ix, iy) {
|
|
566
|
-
ix = typeof ix === "undefined" ? 0 : ix;
|
|
567
|
-
iy = typeof iy === "undefined" ? 1 : iy;
|
|
568
|
-
return [ this.x(d[ix]), this.y(d[iy]) ];
|
|
569
|
-
};
|
|
570
|
-
mpld3_Coordinates.prototype.x_data = function(x) {
|
|
571
|
-
return this.ax.x(x);
|
|
572
|
-
};
|
|
573
|
-
mpld3_Coordinates.prototype.y_data = function(y) {
|
|
574
|
-
return this.ax.y(y);
|
|
575
|
-
};
|
|
576
|
-
mpld3_Coordinates.prototype.x_display = function(x) {
|
|
577
|
-
return x;
|
|
578
|
-
};
|
|
579
|
-
mpld3_Coordinates.prototype.y_display = function(y) {
|
|
580
|
-
return y;
|
|
581
|
-
};
|
|
582
|
-
mpld3_Coordinates.prototype.x_axes = function(x) {
|
|
583
|
-
return x * this.ax.width;
|
|
584
|
-
};
|
|
585
|
-
mpld3_Coordinates.prototype.y_axes = function(y) {
|
|
586
|
-
return this.ax.height * (1 - y);
|
|
587
|
-
};
|
|
588
|
-
mpld3_Coordinates.prototype.x_figure = function(x) {
|
|
589
|
-
return x * this.fig.width - this.ax.position[0];
|
|
590
|
-
};
|
|
591
|
-
mpld3_Coordinates.prototype.y_figure = function(y) {
|
|
592
|
-
return (1 - y) * this.fig.height - this.ax.position[1];
|
|
593
|
-
};
|
|
594
|
-
mpld3.Path = mpld3_Path;
|
|
595
|
-
mpld3_Path.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
596
|
-
mpld3_Path.prototype.constructor = mpld3_Path;
|
|
597
|
-
mpld3_Path.prototype.requiredProps = [ "data" ];
|
|
598
|
-
mpld3_Path.prototype.defaultProps = {
|
|
599
|
-
xindex: 0,
|
|
600
|
-
yindex: 1,
|
|
601
|
-
coordinates: "data",
|
|
602
|
-
facecolor: "green",
|
|
603
|
-
edgecolor: "black",
|
|
604
|
-
edgewidth: 1,
|
|
605
|
-
dasharray: "none",
|
|
606
|
-
pathcodes: null,
|
|
607
|
-
offset: null,
|
|
608
|
-
offsetcoordinates: "data",
|
|
609
|
-
alpha: 1,
|
|
610
|
-
drawstyle: "none",
|
|
611
|
-
zorder: 1
|
|
612
|
-
};
|
|
613
|
-
function mpld3_Path(ax, props) {
|
|
614
|
-
mpld3_PlotElement.call(this, ax, props);
|
|
615
|
-
this.data = ax.fig.get_data(this.props.data);
|
|
616
|
-
this.pathcodes = this.props.pathcodes;
|
|
617
|
-
this.pathcoords = new mpld3_Coordinates(this.props.coordinates, this.ax);
|
|
618
|
-
this.offsetcoords = new mpld3_Coordinates(this.props.offsetcoordinates, this.ax);
|
|
619
|
-
this.datafunc = mpld3_path();
|
|
620
|
-
}
|
|
621
|
-
mpld3_Path.prototype.finiteFilter = function(d, i) {
|
|
622
|
-
return isFinite(this.pathcoords.x(d[this.props.xindex])) && isFinite(this.pathcoords.y(d[this.props.yindex]));
|
|
623
|
-
};
|
|
624
|
-
mpld3_Path.prototype.draw = function() {
|
|
625
|
-
this.datafunc.defined(this.finiteFilter.bind(this)).x(function(d) {
|
|
626
|
-
return this.pathcoords.x(d[this.props.xindex]);
|
|
627
|
-
}.bind(this)).y(function(d) {
|
|
628
|
-
return this.pathcoords.y(d[this.props.yindex]);
|
|
629
|
-
}.bind(this));
|
|
630
|
-
if (this.pathcoords.zoomable) {
|
|
631
|
-
this.path = this.ax.paths.append("svg:path");
|
|
632
|
-
} else {
|
|
633
|
-
this.path = this.ax.staticPaths.append("svg:path");
|
|
634
|
-
}
|
|
635
|
-
this.path = this.path.attr("d", this.datafunc(this.data, this.pathcodes)).attr("class", "mpld3-path").style("stroke", this.props.edgecolor).style("stroke-width", this.props.edgewidth).style("stroke-dasharray", this.props.dasharray).style("stroke-opacity", this.props.alpha).style("fill", this.props.facecolor).style("fill-opacity", this.props.alpha).attr("vector-effect", "non-scaling-stroke");
|
|
636
|
-
if (this.props.offset !== null) {
|
|
637
|
-
var offset = this.offsetcoords.xy(this.props.offset);
|
|
638
|
-
this.path.attr("transform", "translate(" + offset + ")");
|
|
639
|
-
}
|
|
640
|
-
};
|
|
641
|
-
mpld3_Path.prototype.elements = function(d) {
|
|
642
|
-
return this.path;
|
|
643
|
-
};
|
|
644
|
-
mpld3.PathCollection = mpld3_PathCollection;
|
|
645
|
-
mpld3_PathCollection.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
646
|
-
mpld3_PathCollection.prototype.constructor = mpld3_PathCollection;
|
|
647
|
-
mpld3_PathCollection.prototype.requiredProps = [ "paths", "offsets" ];
|
|
648
|
-
mpld3_PathCollection.prototype.defaultProps = {
|
|
649
|
-
xindex: 0,
|
|
650
|
-
yindex: 1,
|
|
651
|
-
pathtransforms: [],
|
|
652
|
-
pathcoordinates: "display",
|
|
653
|
-
offsetcoordinates: "data",
|
|
654
|
-
offsetorder: "before",
|
|
655
|
-
edgecolors: [ "#000000" ],
|
|
656
|
-
drawstyle: "none",
|
|
657
|
-
edgewidths: [ 1 ],
|
|
658
|
-
facecolors: [ "#0000FF" ],
|
|
659
|
-
alphas: [ 1 ],
|
|
660
|
-
zorder: 2
|
|
661
|
-
};
|
|
662
|
-
function mpld3_PathCollection(ax, props) {
|
|
663
|
-
mpld3_PlotElement.call(this, ax, props);
|
|
664
|
-
if (this.props.facecolors == null || this.props.facecolors.length == 0) {
|
|
665
|
-
this.props.facecolors = [ "none" ];
|
|
666
|
-
}
|
|
667
|
-
if (this.props.edgecolors == null || this.props.edgecolors.length == 0) {
|
|
668
|
-
this.props.edgecolors = [ "none" ];
|
|
669
|
-
}
|
|
670
|
-
var offsets = this.ax.fig.get_data(this.props.offsets);
|
|
671
|
-
if (offsets === null || offsets.length === 0) offsets = [ null ];
|
|
672
|
-
var N = Math.max(this.props.paths.length, offsets.length);
|
|
673
|
-
if (offsets.length === N) {
|
|
674
|
-
this.offsets = offsets;
|
|
675
|
-
} else {
|
|
676
|
-
this.offsets = [];
|
|
677
|
-
for (var i = 0; i < N; i++) this.offsets.push(getMod(offsets, i));
|
|
678
|
-
}
|
|
679
|
-
this.pathcoords = new mpld3_Coordinates(this.props.pathcoordinates, this.ax);
|
|
680
|
-
this.offsetcoords = new mpld3_Coordinates(this.props.offsetcoordinates, this.ax);
|
|
681
|
-
}
|
|
682
|
-
mpld3_PathCollection.prototype.transformFunc = function(d, i) {
|
|
683
|
-
var t = this.props.pathtransforms;
|
|
684
|
-
var transform = t.length == 0 ? "" : mpld3.getTransformation("matrix(" + getMod(t, i) + ")").toString();
|
|
685
|
-
var offset = d === null || typeof d === "undefined" ? "translate(0, 0)" : "translate(" + this.offsetcoords.xy(d, this.props.xindex, this.props.yindex) + ")";
|
|
686
|
-
return this.props.offsetorder === "after" ? transform + offset : offset + transform;
|
|
687
|
-
};
|
|
688
|
-
mpld3_PathCollection.prototype.pathFunc = function(d, i) {
|
|
689
|
-
return mpld3_path().x(function(d) {
|
|
690
|
-
return this.pathcoords.x(d[0]);
|
|
691
|
-
}.bind(this)).y(function(d) {
|
|
692
|
-
return this.pathcoords.y(d[1]);
|
|
693
|
-
}.bind(this)).apply(this, getMod(this.props.paths, i));
|
|
694
|
-
};
|
|
695
|
-
mpld3_PathCollection.prototype.styleFunc = function(d, i) {
|
|
696
|
-
var styles = {
|
|
697
|
-
stroke: getMod(this.props.edgecolors, i),
|
|
698
|
-
"stroke-width": getMod(this.props.edgewidths, i),
|
|
699
|
-
"stroke-opacity": getMod(this.props.alphas, i),
|
|
700
|
-
fill: getMod(this.props.facecolors, i),
|
|
701
|
-
"fill-opacity": getMod(this.props.alphas, i)
|
|
702
|
-
};
|
|
703
|
-
var ret = "";
|
|
704
|
-
for (var key in styles) {
|
|
705
|
-
ret += key + ":" + styles[key] + ";";
|
|
706
|
-
}
|
|
707
|
-
return ret;
|
|
708
|
-
};
|
|
709
|
-
mpld3_PathCollection.prototype.allFinite = function(d) {
|
|
710
|
-
if (d instanceof Array) {
|
|
711
|
-
return d.length == d.filter(isFinite).length;
|
|
712
|
-
} else {
|
|
713
|
-
return true;
|
|
714
|
-
}
|
|
715
|
-
};
|
|
716
|
-
mpld3_PathCollection.prototype.draw = function() {
|
|
717
|
-
if (this.offsetcoords.zoomable || this.pathcoords.zoomable) {
|
|
718
|
-
this.group = this.ax.paths.append("svg:g");
|
|
719
|
-
} else {
|
|
720
|
-
this.group = this.ax.staticPaths.append("svg:g");
|
|
721
|
-
}
|
|
722
|
-
this.pathsobj = this.group.selectAll("paths").data(this.offsets.filter(this.allFinite)).enter().append("svg:path").attr("d", this.pathFunc.bind(this)).attr("class", "mpld3-path").attr("transform", this.transformFunc.bind(this)).attr("style", this.styleFunc.bind(this)).attr("vector-effect", "non-scaling-stroke");
|
|
723
|
-
};
|
|
724
|
-
mpld3_PathCollection.prototype.elements = function(d) {
|
|
725
|
-
return this.group.selectAll("path");
|
|
726
|
-
};
|
|
727
|
-
mpld3.Line = mpld3_Line;
|
|
728
|
-
mpld3_Line.prototype = Object.create(mpld3_Path.prototype);
|
|
729
|
-
mpld3_Line.prototype.constructor = mpld3_Line;
|
|
730
|
-
mpld3_Line.prototype.requiredProps = [ "data" ];
|
|
731
|
-
mpld3_Line.prototype.defaultProps = {
|
|
732
|
-
xindex: 0,
|
|
733
|
-
yindex: 1,
|
|
734
|
-
coordinates: "data",
|
|
735
|
-
color: "salmon",
|
|
736
|
-
linewidth: 2,
|
|
737
|
-
dasharray: "none",
|
|
738
|
-
alpha: 1,
|
|
739
|
-
zorder: 2,
|
|
740
|
-
drawstyle: "none"
|
|
741
|
-
};
|
|
742
|
-
function mpld3_Line(ax, props) {
|
|
743
|
-
mpld3_PlotElement.call(this, ax, props);
|
|
744
|
-
var pathProps = this.props;
|
|
745
|
-
pathProps.facecolor = "none";
|
|
746
|
-
pathProps.edgecolor = pathProps.color;
|
|
747
|
-
delete pathProps.color;
|
|
748
|
-
pathProps.edgewidth = pathProps.linewidth;
|
|
749
|
-
delete pathProps.linewidth;
|
|
750
|
-
const drawstyle = pathProps.drawstyle;
|
|
751
|
-
delete pathProps.drawstyle;
|
|
752
|
-
this.defaultProps = mpld3_Path.prototype.defaultProps;
|
|
753
|
-
mpld3_Path.call(this, ax, pathProps);
|
|
754
|
-
switch (drawstyle) {
|
|
755
|
-
case "steps":
|
|
756
|
-
case "steps-pre":
|
|
757
|
-
this.datafunc = d3.line().curve(d3.curveStepBefore);
|
|
758
|
-
break;
|
|
759
|
-
|
|
760
|
-
case "steps-post":
|
|
761
|
-
this.datafunc = d3.line().curve(d3.curveStepAfter);
|
|
762
|
-
break;
|
|
763
|
-
|
|
764
|
-
case "steps-mid":
|
|
765
|
-
this.datafunc = d3.line().curve(d3.curveStep);
|
|
766
|
-
break;
|
|
767
|
-
|
|
768
|
-
default:
|
|
769
|
-
this.datafunc = d3.line().curve(d3.curveLinear);
|
|
770
|
-
}
|
|
771
|
-
}
|
|
772
|
-
mpld3.Markers = mpld3_Markers;
|
|
773
|
-
mpld3_Markers.prototype = Object.create(mpld3_PathCollection.prototype);
|
|
774
|
-
mpld3_Markers.prototype.constructor = mpld3_Markers;
|
|
775
|
-
mpld3_Markers.prototype.requiredProps = [ "data" ];
|
|
776
|
-
mpld3_Markers.prototype.defaultProps = {
|
|
777
|
-
xindex: 0,
|
|
778
|
-
yindex: 1,
|
|
779
|
-
coordinates: "data",
|
|
780
|
-
facecolor: "salmon",
|
|
781
|
-
edgecolor: "black",
|
|
782
|
-
edgewidth: 1,
|
|
783
|
-
alpha: 1,
|
|
784
|
-
markersize: 6,
|
|
785
|
-
markername: "circle",
|
|
786
|
-
drawstyle: "none",
|
|
787
|
-
markerpath: null,
|
|
788
|
-
zorder: 3
|
|
789
|
-
};
|
|
790
|
-
function mpld3_Markers(ax, props) {
|
|
791
|
-
mpld3_PlotElement.call(this, ax, props);
|
|
792
|
-
if (this.props.markerpath !== null) {
|
|
793
|
-
this.marker = this.props.markerpath[0].length == 0 ? null : mpld3.path().call(this.props.markerpath[0], this.props.markerpath[1]);
|
|
794
|
-
} else {
|
|
795
|
-
this.marker = this.props.markername === null ? null : d3.symbol(this.props.markername).size(Math.pow(this.props.markersize, 2))();
|
|
796
|
-
}
|
|
797
|
-
var PCprops = {
|
|
798
|
-
paths: [ this.props.markerpath ],
|
|
799
|
-
offsets: ax.fig.parse_offsets(ax.fig.get_data(this.props.data, true)),
|
|
800
|
-
xindex: this.props.xindex,
|
|
801
|
-
yindex: this.props.yindex,
|
|
802
|
-
offsetcoordinates: this.props.coordinates,
|
|
803
|
-
edgecolors: [ this.props.edgecolor ],
|
|
804
|
-
edgewidths: [ this.props.edgewidth ],
|
|
805
|
-
facecolors: [ this.props.facecolor ],
|
|
806
|
-
alphas: [ this.props.alpha ],
|
|
807
|
-
zorder: this.props.zorder,
|
|
808
|
-
id: this.props.id
|
|
809
|
-
};
|
|
810
|
-
this.requiredProps = mpld3_PathCollection.prototype.requiredProps;
|
|
811
|
-
this.defaultProps = mpld3_PathCollection.prototype.defaultProps;
|
|
812
|
-
mpld3_PathCollection.call(this, ax, PCprops);
|
|
813
|
-
}
|
|
814
|
-
mpld3_Markers.prototype.pathFunc = function(d, i) {
|
|
815
|
-
return this.marker;
|
|
816
|
-
};
|
|
817
|
-
mpld3.Image = mpld3_Image;
|
|
818
|
-
mpld3_Image.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
819
|
-
mpld3_Image.prototype.constructor = mpld3_Image;
|
|
820
|
-
mpld3_Image.prototype.requiredProps = [ "data", "extent" ];
|
|
821
|
-
mpld3_Image.prototype.defaultProps = {
|
|
822
|
-
alpha: 1,
|
|
823
|
-
coordinates: "data",
|
|
824
|
-
drawstyle: "none",
|
|
825
|
-
zorder: 1
|
|
826
|
-
};
|
|
827
|
-
function mpld3_Image(ax, props) {
|
|
828
|
-
mpld3_PlotElement.call(this, ax, props);
|
|
829
|
-
this.coords = new mpld3_Coordinates(this.props.coordinates, this.ax);
|
|
830
|
-
}
|
|
831
|
-
mpld3_Image.prototype.draw = function() {
|
|
832
|
-
this.image = this.ax.paths.append("svg:image");
|
|
833
|
-
this.image = this.image.attr("class", "mpld3-image").attr("xlink:href", "data:image/png;base64," + this.props.data).style("opacity", this.props.alpha).attr("preserveAspectRatio", "none");
|
|
834
|
-
this.updateDimensions();
|
|
835
|
-
};
|
|
836
|
-
mpld3_Image.prototype.elements = function(d) {
|
|
837
|
-
return d3.select(this.image);
|
|
838
|
-
};
|
|
839
|
-
mpld3_Image.prototype.updateDimensions = function() {
|
|
840
|
-
var extent = this.props.extent;
|
|
841
|
-
this.image.attr("x", this.coords.x(extent[0])).attr("y", this.coords.y(extent[3])).attr("width", this.coords.x(extent[1]) - this.coords.x(extent[0])).attr("height", this.coords.y(extent[2]) - this.coords.y(extent[3]));
|
|
842
|
-
};
|
|
843
|
-
mpld3.Text = mpld3_Text;
|
|
844
|
-
mpld3_Text.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
845
|
-
mpld3_Text.prototype.constructor = mpld3_Text;
|
|
846
|
-
mpld3_Text.prototype.requiredProps = [ "text", "position" ];
|
|
847
|
-
mpld3_Text.prototype.defaultProps = {
|
|
848
|
-
coordinates: "data",
|
|
849
|
-
h_anchor: "start",
|
|
850
|
-
v_baseline: "auto",
|
|
851
|
-
rotation: 0,
|
|
852
|
-
fontsize: 11,
|
|
853
|
-
drawstyle: "none",
|
|
854
|
-
color: "black",
|
|
855
|
-
alpha: 1,
|
|
856
|
-
zorder: 3
|
|
857
|
-
};
|
|
858
|
-
function mpld3_Text(ax, props) {
|
|
859
|
-
mpld3_PlotElement.call(this, ax, props);
|
|
860
|
-
this.text = this.props.text;
|
|
861
|
-
this.position = this.props.position;
|
|
862
|
-
this.coords = new mpld3_Coordinates(this.props.coordinates, this.ax);
|
|
863
|
-
}
|
|
864
|
-
mpld3_Text.prototype.draw = function() {
|
|
865
|
-
if (this.props.coordinates == "data") {
|
|
866
|
-
if (this.coords.zoomable) {
|
|
867
|
-
this.obj = this.ax.paths.append("text");
|
|
868
|
-
} else {
|
|
869
|
-
this.obj = this.ax.staticPaths.append("text");
|
|
870
|
-
}
|
|
871
|
-
} else {
|
|
872
|
-
this.obj = this.ax.baseaxes.append("text");
|
|
873
|
-
}
|
|
874
|
-
this.obj.attr("class", "mpld3-text").text(this.text).style("text-anchor", this.props.h_anchor).style("dominant-baseline", this.props.v_baseline).style("font-size", this.props.fontsize).style("fill", this.props.color).style("opacity", this.props.alpha);
|
|
875
|
-
this.applyTransform();
|
|
876
|
-
};
|
|
877
|
-
mpld3_Text.prototype.elements = function(d) {
|
|
878
|
-
return d3.select(this.obj);
|
|
879
|
-
};
|
|
880
|
-
mpld3_Text.prototype.applyTransform = function() {
|
|
881
|
-
var pos = this.coords.xy(this.position);
|
|
882
|
-
this.obj.attr("x", pos[0]).attr("y", pos[1]);
|
|
883
|
-
if (this.props.rotation) this.obj.attr("transform", "rotate(" + this.props.rotation + "," + pos + ")");
|
|
884
|
-
};
|
|
885
|
-
mpld3.Axes = mpld3_Axes;
|
|
886
|
-
mpld3_Axes.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
887
|
-
mpld3_Axes.prototype.constructor = mpld3_Axes;
|
|
888
|
-
mpld3_Axes.prototype.requiredProps = [ "xlim", "ylim" ];
|
|
889
|
-
mpld3_Axes.prototype.defaultProps = {
|
|
890
|
-
bbox: [ .1, .1, .8, .8 ],
|
|
891
|
-
axesbg: "#FFFFFF",
|
|
892
|
-
axesbgalpha: 1,
|
|
893
|
-
gridOn: false,
|
|
894
|
-
xdomain: null,
|
|
895
|
-
ydomain: null,
|
|
896
|
-
xscale: "linear",
|
|
897
|
-
yscale: "linear",
|
|
898
|
-
zoomable: true,
|
|
899
|
-
axes: [ {
|
|
900
|
-
position: "left"
|
|
901
|
-
}, {
|
|
902
|
-
position: "bottom"
|
|
903
|
-
} ],
|
|
904
|
-
lines: [],
|
|
905
|
-
paths: [],
|
|
906
|
-
markers: [],
|
|
907
|
-
texts: [],
|
|
908
|
-
collections: [],
|
|
909
|
-
sharex: [],
|
|
910
|
-
sharey: [],
|
|
911
|
-
images: []
|
|
912
|
-
};
|
|
913
|
-
function mpld3_Axes(fig, props) {
|
|
914
|
-
mpld3_PlotElement.call(this, fig, props);
|
|
915
|
-
this.axnum = this.fig.axes.length;
|
|
916
|
-
this.axid = this.fig.figid + "_ax" + (this.axnum + 1);
|
|
917
|
-
this.clipid = this.axid + "_clip";
|
|
918
|
-
this.props.xdomain = this.props.xdomain || this.props.xlim;
|
|
919
|
-
this.props.ydomain = this.props.ydomain || this.props.ylim;
|
|
920
|
-
this.sharex = [];
|
|
921
|
-
this.sharey = [];
|
|
922
|
-
this.elements = [];
|
|
923
|
-
this.axisList = [];
|
|
924
|
-
var bbox = this.props.bbox;
|
|
925
|
-
this.position = [ bbox[0] * this.fig.width, (1 - bbox[1] - bbox[3]) * this.fig.height ];
|
|
926
|
-
this.width = bbox[2] * this.fig.width;
|
|
927
|
-
this.height = bbox[3] * this.fig.height;
|
|
928
|
-
this.isZoomEnabled = null;
|
|
929
|
-
this.zoom = null;
|
|
930
|
-
this.lastTransform = d3.zoomIdentity;
|
|
931
|
-
this.isBoxzoomEnabled = null;
|
|
932
|
-
this.isLinkedBrushEnabled = null;
|
|
933
|
-
this.isCurrentLinkedBrushTarget = false;
|
|
934
|
-
this.brushG = null;
|
|
935
|
-
function buildDate(d) {
|
|
936
|
-
return new Date(d[0], d[1], d[2], d[3], d[4], d[5]);
|
|
937
|
-
}
|
|
938
|
-
function setDomain(scale, domain) {
|
|
939
|
-
return scale !== "date" ? domain : [ buildDate(domain[0]), buildDate(domain[1]) ];
|
|
940
|
-
}
|
|
941
|
-
this.props.xdomain = setDomain(this.props.xscale, this.props.xdomain);
|
|
942
|
-
this.props.ydomain = setDomain(this.props.yscale, this.props.ydomain);
|
|
943
|
-
function build_scale(scale, domain, range) {
|
|
944
|
-
var dom = scale === "date" ? d3.scaleTime() : scale === "log" ? d3.scaleLog() : d3.scaleLinear();
|
|
945
|
-
return dom.domain(domain).range(range);
|
|
946
|
-
}
|
|
947
|
-
this.x = this.xdom = build_scale(this.props.xscale, this.props.xdomain, [ 0, this.width ]);
|
|
948
|
-
this.y = this.ydom = build_scale(this.props.yscale, this.props.ydomain, [ this.height, 0 ]);
|
|
949
|
-
if (this.props.xscale === "date") {
|
|
950
|
-
this.x = mpld3.multiscale(d3.scaleLinear().domain(this.props.xlim).range(this.props.xdomain.map(Number)), this.xdom);
|
|
951
|
-
}
|
|
952
|
-
if (this.props.yscale === "date") {
|
|
953
|
-
this.y = mpld3.multiscale(d3.scaleLinear().domain(this.props.ylim).range(this.props.ydomain.map(Number)), this.ydom);
|
|
954
|
-
}
|
|
955
|
-
var axes = this.props.axes;
|
|
956
|
-
for (var i = 0; i < axes.length; i++) {
|
|
957
|
-
var axis = new mpld3.Axis(this, axes[i]);
|
|
958
|
-
this.axisList.push(axis);
|
|
959
|
-
this.elements.push(axis);
|
|
960
|
-
if (this.props.gridOn || axis.props.grid.gridOn) {
|
|
961
|
-
this.elements.push(axis.getGrid());
|
|
962
|
-
}
|
|
963
|
-
}
|
|
964
|
-
var paths = this.props.paths;
|
|
965
|
-
for (var i = 0; i < paths.length; i++) {
|
|
966
|
-
this.elements.push(new mpld3.Path(this, paths[i]));
|
|
967
|
-
}
|
|
968
|
-
var lines = this.props.lines;
|
|
969
|
-
for (var i = 0; i < lines.length; i++) {
|
|
970
|
-
this.elements.push(new mpld3.Line(this, lines[i]));
|
|
971
|
-
}
|
|
972
|
-
var markers = this.props.markers;
|
|
973
|
-
for (var i = 0; i < markers.length; i++) {
|
|
974
|
-
this.elements.push(new mpld3.Markers(this, markers[i]));
|
|
975
|
-
}
|
|
976
|
-
var texts = this.props.texts;
|
|
977
|
-
for (var i = 0; i < texts.length; i++) {
|
|
978
|
-
this.elements.push(new mpld3.Text(this, texts[i]));
|
|
979
|
-
}
|
|
980
|
-
var collections = this.props.collections;
|
|
981
|
-
for (var i = 0; i < collections.length; i++) {
|
|
982
|
-
this.elements.push(new mpld3.PathCollection(this, collections[i]));
|
|
983
|
-
}
|
|
984
|
-
var images = this.props.images;
|
|
985
|
-
for (var i = 0; i < images.length; i++) {
|
|
986
|
-
this.elements.push(new mpld3.Image(this, images[i]));
|
|
987
|
-
}
|
|
988
|
-
this.elements.sort(function(a, b) {
|
|
989
|
-
return a.props.zorder - b.props.zorder;
|
|
990
|
-
});
|
|
991
|
-
}
|
|
992
|
-
mpld3_Axes.prototype.draw = function() {
|
|
993
|
-
for (var i = 0; i < this.props.sharex.length; i++) {
|
|
994
|
-
this.sharex.push(mpld3.get_element(this.props.sharex[i]));
|
|
995
|
-
}
|
|
996
|
-
for (var i = 0; i < this.props.sharey.length; i++) {
|
|
997
|
-
this.sharey.push(mpld3.get_element(this.props.sharey[i]));
|
|
998
|
-
}
|
|
999
|
-
this.baseaxes = this.fig.canvas.append("g").attr("transform", "translate(" + this.position[0] + "," + this.position[1] + ")").attr("width", this.width).attr("height", this.height).attr("class", "mpld3-baseaxes");
|
|
1000
|
-
this.axes = this.baseaxes.append("g").attr("class", "mpld3-axes").style("pointer-events", "visiblefill");
|
|
1001
|
-
this.clip = this.axes.append("svg:clipPath").attr("id", this.clipid).append("svg:rect").attr("x", 0).attr("y", 0).attr("width", this.width).attr("height", this.height);
|
|
1002
|
-
this.axesbg = this.axes.append("svg:rect").attr("width", this.width).attr("height", this.height).attr("class", "mpld3-axesbg").style("fill", this.props.axesbg).style("fill-opacity", this.props.axesbgalpha);
|
|
1003
|
-
this.pathsContainer = this.axes.append("g").attr("clip-path", "url(#" + this.clipid + ")").attr("x", 0).attr("y", 0).attr("width", this.width).attr("height", this.height).attr("class", "mpld3-paths-container");
|
|
1004
|
-
this.paths = this.pathsContainer.append("g").attr("class", "mpld3-paths");
|
|
1005
|
-
this.staticPaths = this.axes.append("g").attr("class", "mpld3-staticpaths");
|
|
1006
|
-
this.brush = d3.brush().extent([ [ 0, 0 ], [ this.fig.width, this.fig.height ] ]).on("start", this.brushStart.bind(this)).on("brush", this.brushMove.bind(this)).on("end", this.brushEnd.bind(this)).on("start.nokey", function() {
|
|
1007
|
-
d3.select(window).on("keydown.brush keyup.brush", null);
|
|
1008
|
-
});
|
|
1009
|
-
for (var i = 0; i < this.elements.length; i++) {
|
|
1010
|
-
this.elements[i].draw();
|
|
1011
|
-
}
|
|
1012
|
-
};
|
|
1013
|
-
mpld3_Axes.prototype.bindZoom = function() {
|
|
1014
|
-
if (!this.zoom) {
|
|
1015
|
-
this.zoom = d3.zoom();
|
|
1016
|
-
this.zoom.on("zoom", this.zoomed.bind(this));
|
|
1017
|
-
this.axes.call(this.zoom);
|
|
1018
|
-
}
|
|
1019
|
-
};
|
|
1020
|
-
mpld3_Axes.prototype.unbindZoom = function() {
|
|
1021
|
-
if (this.zoom) {
|
|
1022
|
-
this.zoom.on("zoom", null);
|
|
1023
|
-
this.axes.on(".zoom", null);
|
|
1024
|
-
this.zoom = null;
|
|
1025
|
-
}
|
|
1026
|
-
};
|
|
1027
|
-
mpld3_Axes.prototype.bindBrush = function() {
|
|
1028
|
-
if (!this.brushG) {
|
|
1029
|
-
this.brushG = this.axes.append("g").attr("class", "mpld3-brush").call(this.brush);
|
|
1030
|
-
}
|
|
1031
|
-
};
|
|
1032
|
-
mpld3_Axes.prototype.unbindBrush = function() {
|
|
1033
|
-
if (this.brushG) {
|
|
1034
|
-
this.brushG.remove();
|
|
1035
|
-
this.brushG.on(".brush", null);
|
|
1036
|
-
this.brushG = null;
|
|
1037
|
-
}
|
|
1038
|
-
};
|
|
1039
|
-
mpld3_Axes.prototype.reset = function() {
|
|
1040
|
-
if (this.zoom) {
|
|
1041
|
-
this.doZoom(false, d3.zoomIdentity, 750);
|
|
1042
|
-
} else {
|
|
1043
|
-
this.bindZoom();
|
|
1044
|
-
this.doZoom(false, d3.zoomIdentity, 750, function() {
|
|
1045
|
-
if (this.isSomeTypeOfZoomEnabled) {
|
|
1046
|
-
return;
|
|
1047
|
-
}
|
|
1048
|
-
this.unbindZoom();
|
|
1049
|
-
}.bind(this));
|
|
1050
|
-
}
|
|
1051
|
-
};
|
|
1052
|
-
mpld3_Axes.prototype.enableOrDisableBrushing = function() {
|
|
1053
|
-
if (this.isBoxzoomEnabled || this.isLinkedBrushEnabled) {
|
|
1054
|
-
this.bindBrush();
|
|
1055
|
-
} else {
|
|
1056
|
-
this.unbindBrush();
|
|
1057
|
-
}
|
|
1058
|
-
};
|
|
1059
|
-
mpld3_Axes.prototype.isSomeTypeOfZoomEnabled = function() {
|
|
1060
|
-
return this.isZoomEnabled || this.isBoxzoomEnabled;
|
|
1061
|
-
};
|
|
1062
|
-
mpld3_Axes.prototype.enableOrDisableZooming = function() {
|
|
1063
|
-
if (this.isSomeTypeOfZoomEnabled()) {
|
|
1064
|
-
this.bindZoom();
|
|
1065
|
-
} else {
|
|
1066
|
-
this.unbindZoom();
|
|
1067
|
-
}
|
|
1068
|
-
};
|
|
1069
|
-
mpld3_Axes.prototype.enableLinkedBrush = function() {
|
|
1070
|
-
this.isLinkedBrushEnabled = true;
|
|
1071
|
-
this.enableOrDisableBrushing();
|
|
1072
|
-
};
|
|
1073
|
-
mpld3_Axes.prototype.disableLinkedBrush = function() {
|
|
1074
|
-
this.isLinkedBrushEnabled = false;
|
|
1075
|
-
this.enableOrDisableBrushing();
|
|
1076
|
-
};
|
|
1077
|
-
mpld3_Axes.prototype.enableBoxzoom = function() {
|
|
1078
|
-
this.isBoxzoomEnabled = true;
|
|
1079
|
-
this.enableOrDisableBrushing();
|
|
1080
|
-
this.enableOrDisableZooming();
|
|
1081
|
-
};
|
|
1082
|
-
mpld3_Axes.prototype.disableBoxzoom = function() {
|
|
1083
|
-
this.isBoxzoomEnabled = false;
|
|
1084
|
-
this.enableOrDisableBrushing();
|
|
1085
|
-
this.enableOrDisableZooming();
|
|
1086
|
-
};
|
|
1087
|
-
mpld3_Axes.prototype.enableZoom = function() {
|
|
1088
|
-
this.isZoomEnabled = true;
|
|
1089
|
-
this.enableOrDisableZooming();
|
|
1090
|
-
this.axes.style("cursor", "move");
|
|
1091
|
-
};
|
|
1092
|
-
mpld3_Axes.prototype.disableZoom = function() {
|
|
1093
|
-
this.isZoomEnabled = false;
|
|
1094
|
-
this.enableOrDisableZooming();
|
|
1095
|
-
this.axes.style("cursor", null);
|
|
1096
|
-
};
|
|
1097
|
-
mpld3_Axes.prototype.doZoom = function(propagate, transform, duration, onTransitionEnd) {
|
|
1098
|
-
if (!this.props.zoomable || !this.zoom) {
|
|
1099
|
-
return;
|
|
1100
|
-
}
|
|
1101
|
-
if (duration) {
|
|
1102
|
-
var transition = this.axes.transition().duration(duration).call(this.zoom.transform, transform);
|
|
1103
|
-
if (onTransitionEnd) {
|
|
1104
|
-
transition.on("end", onTransitionEnd);
|
|
1105
|
-
}
|
|
1106
|
-
} else {
|
|
1107
|
-
this.axes.call(this.zoom.transform, transform);
|
|
1108
|
-
}
|
|
1109
|
-
if (propagate) {
|
|
1110
|
-
this.lastTransform = transform;
|
|
1111
|
-
this.sharex.forEach(function(sharedAxes) {
|
|
1112
|
-
sharedAxes.doZoom(false, transform, duration);
|
|
1113
|
-
});
|
|
1114
|
-
this.sharey.forEach(function(sharedAxes) {
|
|
1115
|
-
sharedAxes.doZoom(false, transform, duration);
|
|
1116
|
-
});
|
|
1117
|
-
} else {
|
|
1118
|
-
this.lastTransform = transform;
|
|
1119
|
-
}
|
|
1120
|
-
};
|
|
1121
|
-
mpld3_Axes.prototype.zoomed = function() {
|
|
1122
|
-
var isProgrammatic = d3.event.sourceEvent && d3.event.sourceEvent.type != "zoom";
|
|
1123
|
-
if (isProgrammatic) {
|
|
1124
|
-
this.doZoom(true, d3.event.transform, false);
|
|
1125
|
-
} else {
|
|
1126
|
-
var transform = d3.event.transform;
|
|
1127
|
-
this.paths.attr("transform", transform);
|
|
1128
|
-
this.elements.forEach(function(element) {
|
|
1129
|
-
if (element.zoomed) {
|
|
1130
|
-
element.zoomed(transform);
|
|
1131
|
-
}
|
|
1132
|
-
}.bind(this));
|
|
1133
|
-
}
|
|
1134
|
-
};
|
|
1135
|
-
mpld3_Axes.prototype.resetBrush = function() {
|
|
1136
|
-
this.brushG.call(this.brush.move, null);
|
|
1137
|
-
};
|
|
1138
|
-
mpld3_Axes.prototype.doBoxzoom = function(selection) {
|
|
1139
|
-
if (!selection || !this.brushG) {
|
|
1140
|
-
return;
|
|
1141
|
-
}
|
|
1142
|
-
var sel = selection.map(this.lastTransform.invert, this.lastTransform);
|
|
1143
|
-
var dx = sel[1][0] - sel[0][0];
|
|
1144
|
-
var dy = sel[1][1] - sel[0][1];
|
|
1145
|
-
var cx = (sel[0][0] + sel[1][0]) / 2;
|
|
1146
|
-
var cy = (sel[0][1] + sel[1][1]) / 2;
|
|
1147
|
-
var scale = dx > dy ? this.width / dx : this.height / dy;
|
|
1148
|
-
var transX = this.width / 2 - scale * cx;
|
|
1149
|
-
var transY = this.height / 2 - scale * cy;
|
|
1150
|
-
var transform = d3.zoomIdentity.translate(transX, transY).scale(scale);
|
|
1151
|
-
this.doZoom(true, transform, 750);
|
|
1152
|
-
this.resetBrush();
|
|
1153
|
-
};
|
|
1154
|
-
mpld3_Axes.prototype.brushStart = function() {
|
|
1155
|
-
if (this.isLinkedBrushEnabled) {
|
|
1156
|
-
this.isCurrentLinkedBrushTarget = d3.event.sourceEvent.constructor.name == "MouseEvent";
|
|
1157
|
-
if (this.isCurrentLinkedBrushTarget) {
|
|
1158
|
-
this.fig.resetBrushForOtherAxes(this.axid);
|
|
1159
|
-
}
|
|
1160
|
-
}
|
|
1161
|
-
};
|
|
1162
|
-
mpld3_Axes.prototype.brushMove = function() {
|
|
1163
|
-
var selection = d3.event.selection;
|
|
1164
|
-
if (this.isLinkedBrushEnabled) {
|
|
1165
|
-
this.fig.updateLinkedBrush(selection);
|
|
1166
|
-
}
|
|
1167
|
-
};
|
|
1168
|
-
mpld3_Axes.prototype.brushEnd = function() {
|
|
1169
|
-
var selection = d3.event.selection;
|
|
1170
|
-
if (this.isBoxzoomEnabled) {
|
|
1171
|
-
this.doBoxzoom(selection);
|
|
1172
|
-
}
|
|
1173
|
-
if (this.isLinkedBrushEnabled) {
|
|
1174
|
-
if (!selection) {
|
|
1175
|
-
this.fig.endLinkedBrush();
|
|
1176
|
-
}
|
|
1177
|
-
this.isCurrentLinkedBrushTarget = false;
|
|
1178
|
-
}
|
|
1179
|
-
};
|
|
1180
|
-
mpld3_Axes.prototype.setTicks = function(xy, nr, format) {
|
|
1181
|
-
this.axisList.forEach(function(axis) {
|
|
1182
|
-
if (axis.props.xy == xy) {
|
|
1183
|
-
axis.setTicks(nr, format);
|
|
1184
|
-
}
|
|
1185
|
-
});
|
|
1186
|
-
};
|
|
1187
|
-
mpld3.Toolbar = mpld3_Toolbar;
|
|
1188
|
-
mpld3_Toolbar.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
1189
|
-
mpld3_Toolbar.prototype.constructor = mpld3_Toolbar;
|
|
1190
|
-
mpld3_Toolbar.prototype.defaultProps = {
|
|
1191
|
-
buttons: [ "reset", "move" ]
|
|
1192
|
-
};
|
|
1193
|
-
function mpld3_Toolbar(fig, props) {
|
|
1194
|
-
mpld3_PlotElement.call(this, fig, props);
|
|
1195
|
-
this.buttons = [];
|
|
1196
|
-
this.props.buttons.forEach(this.addButton.bind(this));
|
|
1197
|
-
}
|
|
1198
|
-
mpld3_Toolbar.prototype.addButton = function(button) {
|
|
1199
|
-
this.buttons.push(new button(this));
|
|
1200
|
-
};
|
|
1201
|
-
mpld3_Toolbar.prototype.draw = function() {
|
|
1202
|
-
mpld3.insert_css("div#" + this.fig.figid + " .mpld3-toolbar image", {
|
|
1203
|
-
cursor: "pointer",
|
|
1204
|
-
opacity: .2,
|
|
1205
|
-
display: "inline-block",
|
|
1206
|
-
margin: "0px"
|
|
1207
|
-
});
|
|
1208
|
-
mpld3.insert_css("div#" + this.fig.figid + " .mpld3-toolbar image.active", {
|
|
1209
|
-
opacity: .4
|
|
1210
|
-
});
|
|
1211
|
-
mpld3.insert_css("div#" + this.fig.figid + " .mpld3-toolbar image.pressed", {
|
|
1212
|
-
opacity: .6
|
|
1213
|
-
});
|
|
1214
|
-
function showButtons() {
|
|
1215
|
-
this.buttonsobj.transition(750).attr("y", 0);
|
|
1216
|
-
}
|
|
1217
|
-
function hideButtons() {
|
|
1218
|
-
this.buttonsobj.transition(750).delay(250).attr("y", 16);
|
|
1219
|
-
}
|
|
1220
|
-
this.fig.canvas.on("mouseenter", showButtons.bind(this)).on("mouseleave", hideButtons.bind(this)).on("touchenter", showButtons.bind(this)).on("touchstart", showButtons.bind(this));
|
|
1221
|
-
this.toolbar = this.fig.canvas.append("svg:svg").attr("width", 16 * this.buttons.length).attr("height", 16).attr("x", 2).attr("y", this.fig.height - 16 - 2).attr("class", "mpld3-toolbar");
|
|
1222
|
-
this.buttonsobj = this.toolbar.append("svg:g").selectAll("buttons").data(this.buttons).enter().append("svg:image").attr("class", function(d) {
|
|
1223
|
-
return d.cssclass;
|
|
1224
|
-
}).attr("xlink:href", function(d) {
|
|
1225
|
-
return d.icon();
|
|
1226
|
-
}).attr("width", 16).attr("height", 16).attr("x", function(d, i) {
|
|
1227
|
-
return i * 16;
|
|
1228
|
-
}).attr("y", 16).on("click", function(d) {
|
|
1229
|
-
d.click();
|
|
1230
|
-
}).on("mouseenter", function() {
|
|
1231
|
-
d3.select(this).classed("active", true);
|
|
1232
|
-
}).on("mouseleave", function() {
|
|
1233
|
-
d3.select(this).classed("active", false);
|
|
1234
|
-
});
|
|
1235
|
-
for (var i = 0; i < this.buttons.length; i++) this.buttons[i].onDraw();
|
|
1236
|
-
};
|
|
1237
|
-
mpld3_Toolbar.prototype.deactivate_all = function() {
|
|
1238
|
-
this.buttons.forEach(function(b) {
|
|
1239
|
-
b.deactivate();
|
|
1240
|
-
});
|
|
1241
|
-
};
|
|
1242
|
-
mpld3_Toolbar.prototype.deactivate_by_action = function(actions) {
|
|
1243
|
-
function filt(e) {
|
|
1244
|
-
return actions.indexOf(e) !== -1;
|
|
1245
|
-
}
|
|
1246
|
-
if (actions.length > 0) {
|
|
1247
|
-
this.buttons.forEach(function(button) {
|
|
1248
|
-
if (button.actions.filter(filt).length > 0) button.deactivate();
|
|
1249
|
-
});
|
|
1250
|
-
}
|
|
1251
|
-
};
|
|
1252
|
-
mpld3.Button = mpld3_Button;
|
|
1253
|
-
mpld3_Button.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
1254
|
-
mpld3_Button.prototype.constructor = mpld3_Button;
|
|
1255
|
-
function mpld3_Button(toolbar, key) {
|
|
1256
|
-
mpld3_PlotElement.call(this, toolbar);
|
|
1257
|
-
this.toolbar = toolbar;
|
|
1258
|
-
this.fig = this.toolbar.fig;
|
|
1259
|
-
this.cssclass = "mpld3-" + key + "button";
|
|
1260
|
-
this.active = false;
|
|
1261
|
-
}
|
|
1262
|
-
mpld3_Button.prototype.setState = function(state) {
|
|
1263
|
-
state ? this.activate() : this.deactivate();
|
|
1264
|
-
};
|
|
1265
|
-
mpld3_Button.prototype.click = function() {
|
|
1266
|
-
this.active ? this.deactivate() : this.activate();
|
|
1267
|
-
};
|
|
1268
|
-
mpld3_Button.prototype.activate = function() {
|
|
1269
|
-
this.toolbar.deactivate_by_action(this.actions);
|
|
1270
|
-
this.onActivate();
|
|
1271
|
-
this.active = true;
|
|
1272
|
-
this.toolbar.toolbar.select("." + this.cssclass).classed("pressed", true);
|
|
1273
|
-
if (!this.sticky) {
|
|
1274
|
-
this.deactivate();
|
|
1275
|
-
}
|
|
1276
|
-
};
|
|
1277
|
-
mpld3_Button.prototype.deactivate = function() {
|
|
1278
|
-
this.onDeactivate();
|
|
1279
|
-
this.active = false;
|
|
1280
|
-
this.toolbar.toolbar.select("." + this.cssclass).classed("pressed", false);
|
|
1281
|
-
};
|
|
1282
|
-
mpld3_Button.prototype.sticky = false;
|
|
1283
|
-
mpld3_Button.prototype.actions = [];
|
|
1284
|
-
mpld3_Button.prototype.icon = function() {
|
|
1285
|
-
return "";
|
|
1286
|
-
};
|
|
1287
|
-
mpld3_Button.prototype.onActivate = function() {};
|
|
1288
|
-
mpld3_Button.prototype.onDeactivate = function() {};
|
|
1289
|
-
mpld3_Button.prototype.onDraw = function() {};
|
|
1290
|
-
mpld3.ButtonFactory = function(members) {
|
|
1291
|
-
if (typeof members.buttonID !== "string") {
|
|
1292
|
-
throw "ButtonFactory: buttonID must be present and be a string";
|
|
1293
|
-
}
|
|
1294
|
-
function B(toolbar) {
|
|
1295
|
-
mpld3_Button.call(this, toolbar, this.buttonID);
|
|
1296
|
-
}
|
|
1297
|
-
B.prototype = Object.create(mpld3_Button.prototype);
|
|
1298
|
-
B.prototype.constructor = B;
|
|
1299
|
-
for (var key in members) {
|
|
1300
|
-
B.prototype[key] = members[key];
|
|
1301
|
-
}
|
|
1302
|
-
return B;
|
|
1303
|
-
};
|
|
1304
|
-
mpld3.Plugin = mpld3_Plugin;
|
|
1305
|
-
mpld3_Plugin.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
1306
|
-
mpld3_Plugin.prototype.constructor = mpld3_Plugin;
|
|
1307
|
-
mpld3_Plugin.prototype.requiredProps = [];
|
|
1308
|
-
mpld3_Plugin.prototype.defaultProps = {};
|
|
1309
|
-
function mpld3_Plugin(fig, props) {
|
|
1310
|
-
mpld3_PlotElement.call(this, fig, props);
|
|
1311
|
-
}
|
|
1312
|
-
mpld3_Plugin.prototype.draw = function() {};
|
|
1313
|
-
mpld3.ResetPlugin = mpld3_ResetPlugin;
|
|
1314
|
-
mpld3.register_plugin("reset", mpld3_ResetPlugin);
|
|
1315
|
-
mpld3_ResetPlugin.prototype = Object.create(mpld3_Plugin.prototype);
|
|
1316
|
-
mpld3_ResetPlugin.prototype.constructor = mpld3_ResetPlugin;
|
|
1317
|
-
mpld3_ResetPlugin.prototype.requiredProps = [];
|
|
1318
|
-
mpld3_ResetPlugin.prototype.defaultProps = {};
|
|
1319
|
-
function mpld3_ResetPlugin(fig, props) {
|
|
1320
|
-
mpld3_Plugin.call(this, fig, props);
|
|
1321
|
-
var ResetButton = mpld3.ButtonFactory({
|
|
1322
|
-
buttonID: "reset",
|
|
1323
|
-
sticky: false,
|
|
1324
|
-
onActivate: function() {
|
|
1325
|
-
this.toolbar.fig.reset();
|
|
1326
|
-
},
|
|
1327
|
-
icon: function() {
|
|
1328
|
-
return mpld3.icons["reset"];
|
|
1329
|
-
}
|
|
1330
|
-
});
|
|
1331
|
-
this.fig.buttons.push(ResetButton);
|
|
1332
|
-
}
|
|
1333
|
-
mpld3.ZoomPlugin = mpld3_ZoomPlugin;
|
|
1334
|
-
mpld3.register_plugin("zoom", mpld3_ZoomPlugin);
|
|
1335
|
-
mpld3_ZoomPlugin.prototype = Object.create(mpld3_Plugin.prototype);
|
|
1336
|
-
mpld3_ZoomPlugin.prototype.constructor = mpld3_ZoomPlugin;
|
|
1337
|
-
mpld3_ZoomPlugin.prototype.requiredProps = [];
|
|
1338
|
-
mpld3_ZoomPlugin.prototype.defaultProps = {
|
|
1339
|
-
button: true,
|
|
1340
|
-
enabled: null
|
|
1341
|
-
};
|
|
1342
|
-
function mpld3_ZoomPlugin(fig, props) {
|
|
1343
|
-
mpld3_Plugin.call(this, fig, props);
|
|
1344
|
-
if (this.props.enabled === null) {
|
|
1345
|
-
this.props.enabled = !this.props.button;
|
|
1346
|
-
}
|
|
1347
|
-
var enabled = this.props.enabled;
|
|
1348
|
-
if (this.props.button) {
|
|
1349
|
-
var ZoomButton = mpld3.ButtonFactory({
|
|
1350
|
-
buttonID: "zoom",
|
|
1351
|
-
sticky: true,
|
|
1352
|
-
actions: [ "scroll", "drag" ],
|
|
1353
|
-
onActivate: this.activate.bind(this),
|
|
1354
|
-
onDeactivate: this.deactivate.bind(this),
|
|
1355
|
-
onDraw: function() {
|
|
1356
|
-
this.setState(enabled);
|
|
1357
|
-
},
|
|
1358
|
-
icon: function() {
|
|
1359
|
-
return mpld3.icons["move"];
|
|
1360
|
-
}
|
|
1361
|
-
});
|
|
1362
|
-
this.fig.buttons.push(ZoomButton);
|
|
1363
|
-
}
|
|
1364
|
-
}
|
|
1365
|
-
mpld3_ZoomPlugin.prototype.activate = function() {
|
|
1366
|
-
this.fig.enableZoom();
|
|
1367
|
-
};
|
|
1368
|
-
mpld3_ZoomPlugin.prototype.deactivate = function() {
|
|
1369
|
-
this.fig.disableZoom();
|
|
1370
|
-
};
|
|
1371
|
-
mpld3_ZoomPlugin.prototype.draw = function() {
|
|
1372
|
-
if (this.props.enabled) {
|
|
1373
|
-
this.activate();
|
|
1374
|
-
} else {
|
|
1375
|
-
this.deactivate();
|
|
1376
|
-
}
|
|
1377
|
-
};
|
|
1378
|
-
mpld3.BoxZoomPlugin = mpld3_BoxZoomPlugin;
|
|
1379
|
-
mpld3.register_plugin("boxzoom", mpld3_BoxZoomPlugin);
|
|
1380
|
-
mpld3_BoxZoomPlugin.prototype = Object.create(mpld3_Plugin.prototype);
|
|
1381
|
-
mpld3_BoxZoomPlugin.prototype.constructor = mpld3_BoxZoomPlugin;
|
|
1382
|
-
mpld3_BoxZoomPlugin.prototype.requiredProps = [];
|
|
1383
|
-
mpld3_BoxZoomPlugin.prototype.defaultProps = {
|
|
1384
|
-
button: true,
|
|
1385
|
-
enabled: null
|
|
1386
|
-
};
|
|
1387
|
-
function mpld3_BoxZoomPlugin(fig, props) {
|
|
1388
|
-
mpld3_Plugin.call(this, fig, props);
|
|
1389
|
-
if (this.props.enabled === null) {
|
|
1390
|
-
this.props.enabled = !this.props.button;
|
|
1391
|
-
}
|
|
1392
|
-
var enabled = this.props.enabled;
|
|
1393
|
-
if (this.props.button) {
|
|
1394
|
-
var BoxZoomButton = mpld3.ButtonFactory({
|
|
1395
|
-
buttonID: "boxzoom",
|
|
1396
|
-
sticky: true,
|
|
1397
|
-
actions: [ "drag" ],
|
|
1398
|
-
onActivate: this.activate.bind(this),
|
|
1399
|
-
onDeactivate: this.deactivate.bind(this),
|
|
1400
|
-
onDraw: function() {
|
|
1401
|
-
this.setState(enabled);
|
|
1402
|
-
},
|
|
1403
|
-
icon: function() {
|
|
1404
|
-
return mpld3.icons["zoom"];
|
|
1405
|
-
}
|
|
1406
|
-
});
|
|
1407
|
-
this.fig.buttons.push(BoxZoomButton);
|
|
1408
|
-
}
|
|
1409
|
-
this.extentClass = "boxzoombrush";
|
|
1410
|
-
}
|
|
1411
|
-
mpld3_BoxZoomPlugin.prototype.activate = function() {
|
|
1412
|
-
this.fig.enableBoxzoom();
|
|
1413
|
-
};
|
|
1414
|
-
mpld3_BoxZoomPlugin.prototype.deactivate = function() {
|
|
1415
|
-
this.fig.disableBoxzoom();
|
|
1416
|
-
};
|
|
1417
|
-
mpld3_BoxZoomPlugin.prototype.draw = function() {
|
|
1418
|
-
if (this.props.enabled) {
|
|
1419
|
-
this.activate();
|
|
1420
|
-
} else {
|
|
1421
|
-
this.deactivate();
|
|
1422
|
-
}
|
|
1423
|
-
};
|
|
1424
|
-
mpld3.TooltipPlugin = mpld3_TooltipPlugin;
|
|
1425
|
-
mpld3.register_plugin("tooltip", mpld3_TooltipPlugin);
|
|
1426
|
-
mpld3_TooltipPlugin.prototype = Object.create(mpld3_Plugin.prototype);
|
|
1427
|
-
mpld3_TooltipPlugin.prototype.constructor = mpld3_TooltipPlugin;
|
|
1428
|
-
mpld3_TooltipPlugin.prototype.requiredProps = [ "id" ];
|
|
1429
|
-
mpld3_TooltipPlugin.prototype.defaultProps = {
|
|
1430
|
-
labels: null,
|
|
1431
|
-
hoffset: 0,
|
|
1432
|
-
voffset: 10,
|
|
1433
|
-
location: "mouse"
|
|
1434
|
-
};
|
|
1435
|
-
function mpld3_TooltipPlugin(fig, props) {
|
|
1436
|
-
mpld3_Plugin.call(this, fig, props);
|
|
1437
|
-
}
|
|
1438
|
-
mpld3_TooltipPlugin.prototype.draw = function() {
|
|
1439
|
-
var obj = mpld3.get_element(this.props.id, this.fig);
|
|
1440
|
-
var labels = this.props.labels;
|
|
1441
|
-
var loc = this.props.location;
|
|
1442
|
-
this.tooltip = this.fig.canvas.append("text").attr("class", "mpld3-tooltip-text").attr("x", 0).attr("y", 0).text("").style("visibility", "hidden");
|
|
1443
|
-
if (loc == "bottom left" || loc == "top left") {
|
|
1444
|
-
this.x = obj.ax.position[0] + 5 + this.props.hoffset;
|
|
1445
|
-
this.tooltip.style("text-anchor", "beginning");
|
|
1446
|
-
} else if (loc == "bottom right" || loc == "top right") {
|
|
1447
|
-
this.x = obj.ax.position[0] + obj.ax.width - 5 + this.props.hoffset;
|
|
1448
|
-
this.tooltip.style("text-anchor", "end");
|
|
1449
|
-
} else {
|
|
1450
|
-
this.tooltip.style("text-anchor", "middle");
|
|
1451
|
-
}
|
|
1452
|
-
if (loc == "bottom left" || loc == "bottom right") {
|
|
1453
|
-
this.y = obj.ax.position[1] + obj.ax.height - 5 + this.props.voffset;
|
|
1454
|
-
} else if (loc == "top left" || loc == "top right") {
|
|
1455
|
-
this.y = obj.ax.position[1] + 5 + this.props.voffset;
|
|
1456
|
-
}
|
|
1457
|
-
function mouseover(d, i) {
|
|
1458
|
-
this.tooltip.style("visibility", "visible").text(labels === null ? "(" + d + ")" : getMod(labels, i));
|
|
1459
|
-
}
|
|
1460
|
-
function mousemove(d, i) {
|
|
1461
|
-
if (loc === "mouse") {
|
|
1462
|
-
var pos = d3.mouse(this.fig.canvas.node());
|
|
1463
|
-
this.x = pos[0] + this.props.hoffset;
|
|
1464
|
-
this.y = pos[1] - this.props.voffset;
|
|
1465
|
-
}
|
|
1466
|
-
this.tooltip.attr("x", this.x).attr("y", this.y);
|
|
1467
|
-
}
|
|
1468
|
-
function mouseout(d, i) {
|
|
1469
|
-
this.tooltip.style("visibility", "hidden");
|
|
1470
|
-
}
|
|
1471
|
-
obj.elements().on("mouseover", mouseover.bind(this)).on("mousemove", mousemove.bind(this)).on("mouseout", mouseout.bind(this));
|
|
1472
|
-
};
|
|
1473
|
-
mpld3.LinkedBrushPlugin = mpld3_LinkedBrushPlugin;
|
|
1474
|
-
mpld3.register_plugin("linkedbrush", mpld3_LinkedBrushPlugin);
|
|
1475
|
-
mpld3_LinkedBrushPlugin.prototype = Object.create(mpld3.Plugin.prototype);
|
|
1476
|
-
mpld3_LinkedBrushPlugin.prototype.constructor = mpld3_LinkedBrushPlugin;
|
|
1477
|
-
mpld3_LinkedBrushPlugin.prototype.requiredProps = [ "id" ];
|
|
1478
|
-
mpld3_LinkedBrushPlugin.prototype.defaultProps = {
|
|
1479
|
-
button: true,
|
|
1480
|
-
enabled: null
|
|
1481
|
-
};
|
|
1482
|
-
function mpld3_LinkedBrushPlugin(fig, props) {
|
|
1483
|
-
mpld3.Plugin.call(this, fig, props);
|
|
1484
|
-
if (this.props.enabled === null) {
|
|
1485
|
-
this.props.enabled = !this.props.button;
|
|
1486
|
-
}
|
|
1487
|
-
var enabled = this.props.enabled;
|
|
1488
|
-
if (this.props.button) {
|
|
1489
|
-
var BrushButton = mpld3.ButtonFactory({
|
|
1490
|
-
buttonID: "linkedbrush",
|
|
1491
|
-
sticky: true,
|
|
1492
|
-
actions: [ "drag" ],
|
|
1493
|
-
onActivate: this.activate.bind(this),
|
|
1494
|
-
onDeactivate: this.deactivate.bind(this),
|
|
1495
|
-
onDraw: function() {
|
|
1496
|
-
this.setState(enabled);
|
|
1497
|
-
},
|
|
1498
|
-
icon: function() {
|
|
1499
|
-
return mpld3.icons["brush"];
|
|
1500
|
-
}
|
|
1501
|
-
});
|
|
1502
|
-
this.fig.buttons.push(BrushButton);
|
|
1503
|
-
}
|
|
1504
|
-
this.pathCollectionsByAxes = [];
|
|
1505
|
-
this.objectsByAxes = [];
|
|
1506
|
-
this.allObjects = [];
|
|
1507
|
-
this.extentClass = "linkedbrush";
|
|
1508
|
-
this.dataKey = "offsets";
|
|
1509
|
-
this.objectClass = null;
|
|
1510
|
-
}
|
|
1511
|
-
mpld3_LinkedBrushPlugin.prototype.activate = function() {
|
|
1512
|
-
this.fig.enableLinkedBrush();
|
|
1513
|
-
};
|
|
1514
|
-
mpld3_LinkedBrushPlugin.prototype.deactivate = function() {
|
|
1515
|
-
this.fig.disableLinkedBrush();
|
|
1516
|
-
};
|
|
1517
|
-
mpld3_LinkedBrushPlugin.prototype.isPathInSelection = function(path, ix, iy, sel) {
|
|
1518
|
-
var result = sel[0][0] < path[ix] && sel[1][0] > path[ix] && sel[0][1] < path[iy] && sel[1][1] > path[iy];
|
|
1519
|
-
return result;
|
|
1520
|
-
};
|
|
1521
|
-
mpld3_LinkedBrushPlugin.prototype.invertSelection = function(sel, axes) {
|
|
1522
|
-
var xs = [ axes.x.invert(sel[0][0]), axes.x.invert(sel[1][0]) ];
|
|
1523
|
-
var ys = [ axes.y.invert(sel[1][1]), axes.y.invert(sel[0][1]) ];
|
|
1524
|
-
return [ [ Math.min.apply(Math, xs), Math.min.apply(Math, ys) ], [ Math.max.apply(Math, xs), Math.max.apply(Math, ys) ] ];
|
|
1525
|
-
};
|
|
1526
|
-
mpld3_LinkedBrushPlugin.prototype.update = function(selection) {
|
|
1527
|
-
if (!selection) {
|
|
1528
|
-
return;
|
|
1529
|
-
}
|
|
1530
|
-
this.pathCollectionsByAxes.forEach(function(axesColls, axesIndex) {
|
|
1531
|
-
var pathCollection = axesColls[0];
|
|
1532
|
-
var objects = this.objectsByAxes[axesIndex];
|
|
1533
|
-
var invertedSelection = this.invertSelection(selection, this.fig.axes[axesIndex]);
|
|
1534
|
-
var ix = pathCollection.props.xindex;
|
|
1535
|
-
var iy = pathCollection.props.yindex;
|
|
1536
|
-
objects.selectAll("path").classed("mpld3-hidden", function(path, idx) {
|
|
1537
|
-
return !this.isPathInSelection(path, ix, iy, invertedSelection);
|
|
1538
|
-
}.bind(this));
|
|
1539
|
-
}.bind(this));
|
|
1540
|
-
};
|
|
1541
|
-
mpld3_LinkedBrushPlugin.prototype.end = function() {
|
|
1542
|
-
this.allObjects.selectAll("path").classed("mpld3-hidden", false);
|
|
1543
|
-
};
|
|
1544
|
-
mpld3_LinkedBrushPlugin.prototype.draw = function() {
|
|
1545
|
-
mpld3.insert_css("#" + this.fig.figid + " path.mpld3-hidden", {
|
|
1546
|
-
stroke: "#ccc !important",
|
|
1547
|
-
fill: "#ccc !important"
|
|
1548
|
-
});
|
|
1549
|
-
var pathCollection = mpld3.get_element(this.props.id);
|
|
1550
|
-
if (!pathCollection) {
|
|
1551
|
-
throw new Error("[LinkedBrush] Could not find path collection");
|
|
1552
|
-
}
|
|
1553
|
-
if (!("offsets" in pathCollection.props)) {
|
|
1554
|
-
throw new Error("[LinkedBrush] Figure is not a scatter plot.");
|
|
1555
|
-
}
|
|
1556
|
-
this.objectClass = "mpld3-brushtarget-" + pathCollection.props[this.dataKey];
|
|
1557
|
-
this.pathCollectionsByAxes = this.fig.axes.map(function(axes) {
|
|
1558
|
-
return axes.elements.map(function(el) {
|
|
1559
|
-
if (el.props[this.dataKey] == pathCollection.props[this.dataKey]) {
|
|
1560
|
-
el.group.classed(this.objectClass, true);
|
|
1561
|
-
return el;
|
|
1562
|
-
}
|
|
1563
|
-
}.bind(this)).filter(function(d) {
|
|
1564
|
-
return d;
|
|
1565
|
-
});
|
|
1566
|
-
}.bind(this));
|
|
1567
|
-
this.objectsByAxes = this.fig.axes.map(function(axes) {
|
|
1568
|
-
return axes.axes.selectAll("." + this.objectClass);
|
|
1569
|
-
}.bind(this));
|
|
1570
|
-
this.allObjects = this.fig.canvas.selectAll("." + this.objectClass);
|
|
1571
|
-
};
|
|
1572
|
-
mpld3.register_plugin("mouseposition", MousePositionPlugin);
|
|
1573
|
-
MousePositionPlugin.prototype = Object.create(mpld3.Plugin.prototype);
|
|
1574
|
-
MousePositionPlugin.prototype.constructor = MousePositionPlugin;
|
|
1575
|
-
MousePositionPlugin.prototype.requiredProps = [];
|
|
1576
|
-
MousePositionPlugin.prototype.defaultProps = {
|
|
1577
|
-
fontsize: 12,
|
|
1578
|
-
fmt: ".3g"
|
|
1579
|
-
};
|
|
1580
|
-
function MousePositionPlugin(fig, props) {
|
|
1581
|
-
mpld3.Plugin.call(this, fig, props);
|
|
1582
|
-
}
|
|
1583
|
-
MousePositionPlugin.prototype.draw = function() {
|
|
1584
|
-
var fig = this.fig;
|
|
1585
|
-
var fmt = d3.format(this.props.fmt);
|
|
1586
|
-
var coords = fig.canvas.append("text").attr("class", "mpld3-coordinates").style("text-anchor", "end").style("font-size", this.props.fontsize).attr("x", this.fig.width - 5).attr("y", this.fig.height - 5);
|
|
1587
|
-
for (var i = 0; i < this.fig.axes.length; i++) {
|
|
1588
|
-
var update_coords = function() {
|
|
1589
|
-
var ax = fig.axes[i];
|
|
1590
|
-
return function() {
|
|
1591
|
-
var pos = d3.mouse(this), x = ax.x.invert(pos[0]), y = ax.y.invert(pos[1]);
|
|
1592
|
-
coords.text("(" + fmt(x) + ", " + fmt(y) + ")");
|
|
1593
|
-
};
|
|
1594
|
-
}();
|
|
1595
|
-
fig.axes[i].baseaxes.on("mousemove", update_coords).on("mouseout", function() {
|
|
1596
|
-
coords.text("");
|
|
1597
|
-
});
|
|
1598
|
-
}
|
|
1599
|
-
};
|
|
1600
|
-
mpld3.Figure = mpld3_Figure;
|
|
1601
|
-
mpld3_Figure.prototype = Object.create(mpld3_PlotElement.prototype);
|
|
1602
|
-
mpld3_Figure.prototype.constructor = mpld3_Figure;
|
|
1603
|
-
mpld3_Figure.prototype.requiredProps = [ "width", "height" ];
|
|
1604
|
-
mpld3_Figure.prototype.defaultProps = {
|
|
1605
|
-
data: {},
|
|
1606
|
-
axes: [],
|
|
1607
|
-
plugins: [ {
|
|
1608
|
-
type: "reset"
|
|
1609
|
-
}, {
|
|
1610
|
-
type: "zoom"
|
|
1611
|
-
}, {
|
|
1612
|
-
type: "boxzoom"
|
|
1613
|
-
} ]
|
|
1614
|
-
};
|
|
1615
|
-
function mpld3_Figure(figid, props) {
|
|
1616
|
-
mpld3_PlotElement.call(this, null, props);
|
|
1617
|
-
this.figid = figid;
|
|
1618
|
-
this.width = this.props.width;
|
|
1619
|
-
this.height = this.props.height;
|
|
1620
|
-
this.data = this.props.data;
|
|
1621
|
-
this.buttons = [];
|
|
1622
|
-
this.root = d3.select("#" + figid).append("div").style("position", "relative");
|
|
1623
|
-
this.axes = [];
|
|
1624
|
-
for (var i = 0; i < this.props.axes.length; i++) this.axes.push(new mpld3_Axes(this, this.props.axes[i]));
|
|
1625
|
-
this.plugins = [];
|
|
1626
|
-
this.pluginsByType = {};
|
|
1627
|
-
this.props.plugins.forEach(function(plugin) {
|
|
1628
|
-
this.addPlugin(plugin);
|
|
1629
|
-
}.bind(this));
|
|
1630
|
-
this.toolbar = new mpld3.Toolbar(this, {
|
|
1631
|
-
buttons: this.buttons
|
|
1632
|
-
});
|
|
1633
|
-
}
|
|
1634
|
-
mpld3_Figure.prototype.addPlugin = function(pluginInfo) {
|
|
1635
|
-
if (!pluginInfo.type) {
|
|
1636
|
-
return console.warn("unspecified plugin type. Skipping this");
|
|
1637
|
-
}
|
|
1638
|
-
var plugin;
|
|
1639
|
-
if (pluginInfo.type in mpld3.plugin_map) {
|
|
1640
|
-
plugin = mpld3.plugin_map[pluginInfo.type];
|
|
1641
|
-
} else {
|
|
1642
|
-
return console.warn("Skipping unrecognized plugin: " + plugin);
|
|
1643
|
-
}
|
|
1644
|
-
if (pluginInfo.clear_toolbar || pluginInfo.buttons) {
|
|
1645
|
-
console.warn("DEPRECATION WARNING: " + "You are using pluginInfo.clear_toolbar or pluginInfo, which " + "have been deprecated. Please see the build-in plugins for the new " + "method to add buttons, otherwise contact the mpld3 maintainers.");
|
|
1646
|
-
}
|
|
1647
|
-
var pluginInfoNoType = mpld3_cloneObj(pluginInfo);
|
|
1648
|
-
delete pluginInfoNoType.type;
|
|
1649
|
-
var pluginInstance = new plugin(this, pluginInfoNoType);
|
|
1650
|
-
this.plugins.push(pluginInstance);
|
|
1651
|
-
this.pluginsByType[pluginInfo.type] = pluginInstance;
|
|
1652
|
-
};
|
|
1653
|
-
mpld3_Figure.prototype.draw = function() {
|
|
1654
|
-
mpld3.insert_css("div#" + this.figid, {
|
|
1655
|
-
"font-family": "Helvetica, sans-serif"
|
|
1656
|
-
});
|
|
1657
|
-
this.canvas = this.root.append("svg:svg").attr("class", "mpld3-figure").attr("width", this.width).attr("height", this.height);
|
|
1658
|
-
for (var i = 0; i < this.axes.length; i++) {
|
|
1659
|
-
this.axes[i].draw();
|
|
1660
|
-
}
|
|
1661
|
-
this.disableZoom();
|
|
1662
|
-
for (var i = 0; i < this.plugins.length; i++) {
|
|
1663
|
-
this.plugins[i].draw();
|
|
1664
|
-
}
|
|
1665
|
-
this.toolbar.draw();
|
|
1666
|
-
};
|
|
1667
|
-
mpld3_Figure.prototype.resetBrushForOtherAxes = function(currentAxid) {
|
|
1668
|
-
this.axes.forEach(function(axes) {
|
|
1669
|
-
if (axes.axid != currentAxid) {
|
|
1670
|
-
axes.resetBrush();
|
|
1671
|
-
}
|
|
1672
|
-
});
|
|
1673
|
-
};
|
|
1674
|
-
mpld3_Figure.prototype.updateLinkedBrush = function(selection) {
|
|
1675
|
-
if (!this.pluginsByType.linkedbrush) {
|
|
1676
|
-
return;
|
|
1677
|
-
}
|
|
1678
|
-
this.pluginsByType.linkedbrush.update(selection);
|
|
1679
|
-
};
|
|
1680
|
-
mpld3_Figure.prototype.endLinkedBrush = function() {
|
|
1681
|
-
if (!this.pluginsByType.linkedbrush) {
|
|
1682
|
-
return;
|
|
1683
|
-
}
|
|
1684
|
-
this.pluginsByType.linkedbrush.end();
|
|
1685
|
-
};
|
|
1686
|
-
mpld3_Figure.prototype.reset = function(duration) {
|
|
1687
|
-
this.axes.forEach(function(axes) {
|
|
1688
|
-
axes.reset();
|
|
1689
|
-
});
|
|
1690
|
-
};
|
|
1691
|
-
mpld3_Figure.prototype.enableLinkedBrush = function() {
|
|
1692
|
-
this.axes.forEach(function(axes) {
|
|
1693
|
-
axes.enableLinkedBrush();
|
|
1694
|
-
});
|
|
1695
|
-
};
|
|
1696
|
-
mpld3_Figure.prototype.disableLinkedBrush = function() {
|
|
1697
|
-
this.axes.forEach(function(axes) {
|
|
1698
|
-
axes.disableLinkedBrush();
|
|
1699
|
-
});
|
|
1700
|
-
};
|
|
1701
|
-
mpld3_Figure.prototype.enableBoxzoom = function() {
|
|
1702
|
-
this.axes.forEach(function(axes) {
|
|
1703
|
-
axes.enableBoxzoom();
|
|
1704
|
-
});
|
|
1705
|
-
};
|
|
1706
|
-
mpld3_Figure.prototype.disableBoxzoom = function() {
|
|
1707
|
-
this.axes.forEach(function(axes) {
|
|
1708
|
-
axes.disableBoxzoom();
|
|
1709
|
-
});
|
|
1710
|
-
};
|
|
1711
|
-
mpld3_Figure.prototype.enableZoom = function() {
|
|
1712
|
-
this.axes.forEach(function(axes) {
|
|
1713
|
-
axes.enableZoom();
|
|
1714
|
-
});
|
|
1715
|
-
};
|
|
1716
|
-
mpld3_Figure.prototype.disableZoom = function() {
|
|
1717
|
-
this.axes.forEach(function(axes) {
|
|
1718
|
-
axes.disableZoom();
|
|
1719
|
-
});
|
|
1720
|
-
};
|
|
1721
|
-
mpld3_Figure.prototype.toggleZoom = function() {
|
|
1722
|
-
if (this.isZoomEnabled) {
|
|
1723
|
-
this.disableZoom();
|
|
1724
|
-
} else {
|
|
1725
|
-
this.enableZoom();
|
|
1726
|
-
}
|
|
1727
|
-
};
|
|
1728
|
-
mpld3_Figure.prototype.setTicks = function(xy, nr, format) {
|
|
1729
|
-
this.axes.forEach(function(axes) {
|
|
1730
|
-
axes.setTicks(xy, nr, format);
|
|
1731
|
-
});
|
|
1732
|
-
};
|
|
1733
|
-
mpld3_Figure.prototype.setXTicks = function(nr, format) {
|
|
1734
|
-
this.setTicks("x", nr, format);
|
|
1735
|
-
};
|
|
1736
|
-
mpld3_Figure.prototype.setYTicks = function(nr, format) {
|
|
1737
|
-
this.setTicks("y", nr, format);
|
|
1738
|
-
};
|
|
1739
|
-
mpld3_Figure.prototype.removeNaN = function(data) {
|
|
1740
|
-
output = output.map(function(offsets) {
|
|
1741
|
-
return offsets.map(function(value) {
|
|
1742
|
-
if (typeof value == "number" && isNaN(value)) {
|
|
1743
|
-
return 0;
|
|
1744
|
-
} else {
|
|
1745
|
-
return value;
|
|
1746
|
-
}
|
|
1747
|
-
});
|
|
1748
|
-
});
|
|
1749
|
-
};
|
|
1750
|
-
mpld3_Figure.prototype.parse_offsets = function(data) {
|
|
1751
|
-
return data.map(function(offsets) {
|
|
1752
|
-
return offsets.map(function(value) {
|
|
1753
|
-
if (typeof value == "number" && isNaN(value)) {
|
|
1754
|
-
return 0;
|
|
1755
|
-
} else {
|
|
1756
|
-
return value;
|
|
1757
|
-
}
|
|
1758
|
-
});
|
|
1759
|
-
});
|
|
1760
|
-
};
|
|
1761
|
-
mpld3_Figure.prototype.get_data = function(data) {
|
|
1762
|
-
var output = data;
|
|
1763
|
-
if (data === null || typeof data === "undefined") {
|
|
1764
|
-
output = null;
|
|
1765
|
-
} else if (typeof data === "string") {
|
|
1766
|
-
output = this.data[data];
|
|
1767
|
-
}
|
|
1768
|
-
return output;
|
|
1769
|
-
};
|
|
1770
|
-
mpld3.PlotElement = mpld3_PlotElement;
|
|
1771
|
-
function mpld3_PlotElement(parent, props) {
|
|
1772
|
-
this.parent = isUndefinedOrNull(parent) ? null : parent;
|
|
1773
|
-
this.props = isUndefinedOrNull(props) ? {} : this.processProps(props);
|
|
1774
|
-
this.fig = parent instanceof mpld3_Figure ? parent : parent && "fig" in parent ? parent.fig : null;
|
|
1775
|
-
this.ax = parent instanceof mpld3_Axes ? parent : parent && "ax" in parent ? parent.ax : null;
|
|
1776
|
-
}
|
|
1777
|
-
mpld3_PlotElement.prototype.requiredProps = [];
|
|
1778
|
-
mpld3_PlotElement.prototype.defaultProps = {};
|
|
1779
|
-
mpld3_PlotElement.prototype.processProps = function(props) {
|
|
1780
|
-
props = mpld3_cloneObj(props);
|
|
1781
|
-
var finalProps = {};
|
|
1782
|
-
var this_name = this.name();
|
|
1783
|
-
this.requiredProps.forEach(function(p) {
|
|
1784
|
-
if (!(p in props)) {
|
|
1785
|
-
throw "property '" + p + "' " + "must be specified for " + this_name;
|
|
1786
|
-
}
|
|
1787
|
-
finalProps[p] = props[p];
|
|
1788
|
-
delete props[p];
|
|
1789
|
-
});
|
|
1790
|
-
for (var p in this.defaultProps) {
|
|
1791
|
-
if (p in props) {
|
|
1792
|
-
finalProps[p] = props[p];
|
|
1793
|
-
delete props[p];
|
|
1794
|
-
} else {
|
|
1795
|
-
finalProps[p] = this.defaultProps[p];
|
|
1796
|
-
}
|
|
1797
|
-
}
|
|
1798
|
-
if ("id" in props) {
|
|
1799
|
-
finalProps.id = props.id;
|
|
1800
|
-
delete props.id;
|
|
1801
|
-
} else if (!("id" in finalProps)) {
|
|
1802
|
-
finalProps.id = mpld3.generateId();
|
|
1803
|
-
}
|
|
1804
|
-
for (var p in props) {
|
|
1805
|
-
console.warn("Unrecognized property '" + p + "' " + "for object " + this.name() + " (value = " + props[p] + ").");
|
|
1806
|
-
}
|
|
1807
|
-
return finalProps;
|
|
1808
|
-
};
|
|
1809
|
-
mpld3_PlotElement.prototype.name = function() {
|
|
1810
|
-
var funcNameRegex = /function (.{1,})\(/;
|
|
1811
|
-
var results = funcNameRegex.exec(this.constructor.toString());
|
|
1812
|
-
return results && results.length > 1 ? results[1] : "";
|
|
1813
|
-
};
|
|
1814
|
-
if (typeof module === "object" && module.exports) {
|
|
1815
|
-
module.exports = mpld3;
|
|
1816
|
-
} else {
|
|
1817
|
-
this.mpld3 = mpld3;
|
|
1818
|
-
}
|
|
1819
|
-
console.log("Loaded mpld3 version " + mpld3.version);
|
|
1820
|
-
}(d3);
|