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
|
function mg_clear_mouseover_container(svg) {
svg.selectAll('.mg-active-datapoint-container').selectAll('*').remove();
}
function mg_setup_mouseover_container(svg, args) {
svg.select('.mg-active-datapoint').remove();
var text_anchor = args.mouseover_align === 'right'
? 'end'
: (args.mouseover_align === 'left'
? 'start'
: 'middle');
var mouseover_x = (args.mouseover_align === 'right')
? mg_get_plot_right(args)
: (args.mouseover_align === 'left'
? mg_get_plot_left(args)
: (args.width - args.left - args.right) / 2 + args.left);
var active_datapoint = svg.select('.mg-active-datapoint-container')
.attr('transform', 'translate(0 -18)')
.append('text')
.attr('class', 'mg-active-datapoint')
.attr('xml:space', 'preserve')
.attr('text-anchor', text_anchor);
// set the rollover text's position; if we have markers on two lines,
// nudge up the rollover text a bit
var active_datapoint_y_nudge = 0.75;
var y_position = (args.x_axis_position === 'bottom')
? mg_get_top(args) * active_datapoint_y_nudge
: mg_get_bottom(args) + args.buffer * 3;
if (args.markers) {
var yPos;
svg.selectAll('.mg-marker-text')
.each(function() {
if (!yPos) {
yPos = d3.select(this).attr('y');
} else if (yPos !== d3.select(this).attr('y')) {
active_datapoint_y_nudge = 0.56;
}
});
}
active_datapoint
.attr('transform', 'translate(' + mouseover_x + ',' + (y_position) + ')');
}
function mg_mouseover_tspan(svg, text) {
let tspan = svg.append('tspan').text(text);
return {
bold: () => tspan.attr('font-weight', 'bold'),
font_size: (pts) => tspan.attr('font-size', pts),
x: (x) => tspan.attr('x', x),
y: (y) => tspan.attr('y', y),
elem: tspan
};
}
function mg_reset_text_container(svg) {
var textContainer = svg.select('.mg-active-datapoint');
textContainer
.selectAll('*')
.remove();
return textContainer;
}
function mg_mouseover_row(row_number, container, rargs) {
var lineHeight = 1.1;
var rrr = container.append('tspan')
.attr('x', 0)
.attr('y', (row_number * lineHeight) + 'em');
return {
rargs,
text: (text) => {
return mg_mouseover_tspan(rrr, text);
}
};
}
function mg_mouseover_text(args, rargs) {
mg_setup_mouseover_container(rargs.svg, args);
let mouseOver = {
row_number: 0,
rargs,
mouseover_row: (rargs) => {
mouseOver.row_number += 1;
return mg_mouseover_row(mouseOver.row_number, mouseOver.text_container, rargs);
},
text_container: mg_reset_text_container(rargs.svg)
};
return mouseOver;
}
|
