/
d3-xray.js
64 lines (64 loc) · 1.66 KB
/
d3-xray.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
(function() {
// used to make sure the line break
// only fires once per mouseover
var trigger;
// if d3 isn't available, bail
if (!d3) {
return;
}
// listen to every element (!)
// probably not performant, but who caressss
d3.selectAll('*')
.on('mouseenter', function() {
var node,
data,
attributes,
tag,
selectors,
identifier;
node = this;
trigger = true;
data = d3.select(this).datum();
// if there's no bound data, exit
if (typeof data === 'undefined') {
return;
}
// compile a node identifier by looking
// for these attributes and then prefixing
// with the associated string
attributes = {
'id': '#',
'class': '.'
};
// type of node
tag = node.tagName;
// CSS selectors
selectors = Object.keys(attributes)
.map(function(attribute) {
var value,
prefix;
prefix = attributes[attribute];
value = d3.select(node).attr(attribute);
if (value) {
return prefix + value.replace(/ /g, prefix);
} else {
return '';
}
}).join('');
// identifier string
identifier = tag + selectors;
// log results to console
if (console && typeof console.log === 'function') {
console.log(identifier, data);
}
})
.on('mouseleave', function() {
// log a line break in between mouse actions
if (trigger) {
if (console && typeof console.log === 'function') {
console.log('');
}
trigger = false;
}
});
}).call(this);