Skip to content
This repository was archived by the owner on Mar 17, 2020. It is now read-only.

Commit 70b1cf3

Browse files
cagedcaged
committed
Merge pull request #30 from Caged/explicit-target
Support explicit targets
2 parents 8ced31d + b520932 commit 70b1cf3

5 files changed

Lines changed: 170 additions & 10 deletions

File tree

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "d3-tip",
3-
"version": "0.6.2",
3+
"version": "0.6.3",
44
"main": "index.js",
55
"ignore": [
66
"**/.*",

‎docs/initializing-tooltips.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,4 @@ var vis = d3.select(document.body)
2424
// Show and hide the tooltip
2525
.on('mouseover', tip.show)
2626
.on('mouseout', tip.hide)
27-
```
27+
```

‎docs/showing-and-hiding-tooltips.md‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,17 @@ rect.on('mouseover', function(d) {
1515
})
1616
```
1717

18+
#### Explicit targets
19+
Sometimes you need to manually specify a target to act on. For instance, maybe
20+
you want the tooltip to appear over a different element than the one that triggered
21+
a `mouseover` event. You can specify an explicit target by passing an `SVGElement`
22+
as the last argument.
23+
24+
``` javascript
25+
tip.show(data, target)
26+
```
27+
28+
1829
### tip.hide
1930
Hide a tooltip
2031

@@ -26,4 +37,4 @@ rect.on('mouseout', tip.hide)
2637
rect.on('mouseout', function(d) {
2738
tip.hide(d)
2839
})
29-
```
40+
```

‎examples/explicit-target.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>d3.tip.js - Tooltips for D3</title>
5+
<meta charset="utf-8" />
6+
<title>Explicit Target</title>
7+
<script type="text/javascript" src="../bower_components/d3/d3.js"></script>
8+
<script type="text/javascript" src="../index.js"></script>
9+
<script type="text/javascript">
10+
data = [{"total":225,"days":[12,51,60,26,38,31,7]},{"total":279,"days":[42,33,34,72,61,12,25]},{"total":212,"days":[12,59,24,70,36,5,6]},{"total":335,"days":[17,43,38,58,67,72,40]},{"total":329,"days":[40,53,62,48,38,36,52]},{"total":234,"days":[15,25,41,66,35,37,15]},{"total":175,"days":[2,40,23,40,23,34,13]},{"total":308,"days":[20,22,63,55,51,66,31]},{"total":401,"days":[20,64,42,62,88,79,46]},{"total":214,"days":[24,27,25,48,38,28,24]},{"total":332,"days":[26,43,20,109,74,29,31]},{"total":333,"days":[65,66,62,60,14,43,23]},{"total":437,"days":[33,74,82,70,85,64,29]},{"total":687,"days":[29,82,87,167,156,126,40]},{"total":243,"days":[11,52,44,50,46,30,10]},{"total":360,"days":[16,41,86,62,83,60,12]},{"total":349,"days":[22,55,48,36,88,57,43]},{"total":368,"days":[29,100,68,54,55,46,16]},{"total":377,"days":[3,71,66,57,93,82,5]},{"total":265,"days":[12,61,61,19,44,46,22]},{"total":396,"days":[20,58,70,52,84,93,19]},{"total":467,"days":[25,47,128,93,70,35,69]},{"total":524,"days":[55,79,94,95,122,70,9]},{"total":535,"days":[21,96,95,115,78,89,41]},{"total":333,"days":[20,50,49,52,58,51,53]},{"total":258,"days":[7,23,50,59,46,50,23]},{"total":242,"days":[12,4,54,53,46,33,40]},{"total":335,"days":[1,34,40,75,97,51,37]},{"total":325,"days":[32,57,65,46,60,58,7]},{"total":224,"days":[23,42,43,28,31,27,30]},{"total":317,"days":[20,46,43,46,83,36,43]},{"total":119,"days":[1,10,9,45,30,17,7]},{"total":368,"days":[13,74,77,85,72,40,7]},{"total":271,"days":[10,50,46,61,68,31,5]},{"total":290,"days":[26,48,39,37,68,43,29]},{"total":393,"days":[27,50,133,47,73,37,26]},{"total":316,"days":[2,63,66,47,63,33,42]},{"total":146,"days":[0,32,38,23,45,7,1]},{"total":255,"days":[23,34,72,46,48,24,8]},{"total":196,"days":[9,32,82,18,16,29,10]},{"total":410,"days":[41,52,67,42,49,103,56]},{"total":280,"days":[13,35,40,60,68,53,11]},{"total":432,"days":[45,65,59,55,71,68,69]},{"total":371,"days":[19,104,95,51,66,20,16]},{"total":285,"days":[2,38,50,72,74,47,2]},{"total":350,"days":[47,16,96,93,32,52,14]},{"total":234,"days":[34,68,66,32,5,10,19]},{"total":279,"days":[27,43,64,48,60,25,12]},{"total":391,"days":[40,54,59,68,80,51,39]},{"total":168,"days":[0,44,42,36,30,16,0]},{"total":0,"days":[0,0,0,0,0,0,0]},{"total":14,"days":[6,0,0,0,0,2,6]},{"total":0,"days":[0,0,0,0,0,0,0]}]
11+
</script>
12+
<style type="text/css">
13+
body {
14+
padding: 40px;
15+
font-family: "Helvetica Neue", Helvetica, sans-serif;
16+
font-size: 12px;
17+
height: 1000px;
18+
}
19+
20+
.d3-tip {
21+
line-height: 1;
22+
font-weight: bold;
23+
padding: 12px;
24+
background: rgba(0, 0, 0, 0.8);
25+
color: #fff;
26+
border-radius: 2px;
27+
}
28+
29+
.d3-tip:after {
30+
box-sizing: border-box;
31+
display: inline;
32+
font-size: 10px;
33+
width: 100%;
34+
line-height: 1;
35+
color: rgba(0, 0, 0, 0.8);
36+
content: "\25BC";
37+
position: absolute;
38+
text-align: center;
39+
}
40+
41+
.d3-tip.n:after {
42+
margin: -5px 0 0 0;
43+
top: 100%;
44+
left: 0;
45+
}
46+
47+
.d3-tip span {
48+
color: #ff00c7;
49+
}
50+
51+
.domain {
52+
display: none;
53+
}
54+
55+
.axis line {
56+
stroke-width: 1px;
57+
stroke: #eee;
58+
shape-rendering: crispedges;
59+
}
60+
61+
.axis text {
62+
fill: #888;
63+
}
64+
65+
rect {
66+
fill: #339cff;
67+
fill-opacity: 0.7;
68+
}
69+
70+
rect:hover {
71+
fill-opacity: 1;
72+
}
73+
74+
.legend {
75+
fill: none;
76+
stroke: #ccc;
77+
}
78+
</style>
79+
</head>
80+
<body>
81+
<div id="graph">
82+
83+
</div>
84+
<script type="text/javascript">
85+
var tip = d3.tip()
86+
.attr('class', 'd3-tip')
87+
.html(function(d) { return '<span>' + d.total + '</span>' + ' entries' })
88+
.offset([-12, 0])
89+
90+
var w = 800,
91+
h = 300,
92+
padt = 40, padr = 20, padb = 60, padl = 30,
93+
x = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
94+
y = d3.scale.linear().range([h, 0]),
95+
yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
96+
xAxis = d3.svg.axis().scale(x).orient('bottom')
97+
98+
vis = d3.select('#graph')
99+
.append('svg')
100+
.attr('width', w)
101+
.attr('height', h + padt + padb)
102+
.append('g')
103+
.attr('transform', 'translate(' + padl + ',' + padt + ')')
104+
105+
var max = d3.max(data, function(d) { return d.total })
106+
x.domain(d3.range(data.length))
107+
y.domain([0, max])
108+
109+
vis.call(tip)
110+
vis.append("g")
111+
.attr("class", "y axis")
112+
.call(yAxis)
113+
114+
legend = vis.append('rect')
115+
.attr('width', 50)
116+
.attr('height', 25)
117+
.attr('x', 0)
118+
.attr('y', 0)
119+
.attr('class', 'legend')
120+
121+
vis.append("g")
122+
.attr("class", "x axis")
123+
.attr('transform', 'translate(0,' + h + ')')
124+
.call(xAxis)
125+
.selectAll('.x.axis g')
126+
.style('display', function (d, i) { return i % 3 != 0 ? 'none' : 'block' })
127+
128+
var bars = vis.selectAll('g.bar')
129+
.data(data)
130+
.enter().append('g')
131+
.attr('class', 'bar')
132+
.attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
133+
134+
bars.append('rect')
135+
.attr('width', function() { return x.rangeBand() })
136+
.attr('height', function(d) { return h - y(d.total) })
137+
.attr('y', function(d) { return y(d.total) })
138+
.on('mouseout', tip.hide)
139+
.on('mouseover', function(d) {
140+
tip.show(d, legend.node())
141+
})
142+
143+
</script>
144+
</body>
145+
</html>

‎index.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ d3.tip = function() {
1212
html = d3_tip_html,
1313
node = initNode(),
1414
svg = null,
15-
point = null
15+
point = null,
16+
target = null
1617

1718
function tip(vis) {
1819
svg = getSVGNode(vis)
@@ -24,9 +25,12 @@ d3.tip = function() {
2425
//
2526
// Returns a tip
2627
tip.show = function() {
27-
var content = html.apply(this, arguments),
28-
poffset = offset.apply(this, arguments),
29-
dir = direction.apply(this, arguments),
28+
var args = Array.prototype.slice.call(arguments)
29+
if(args[args.length - 1] instanceof SVGElement) target = args.pop()
30+
31+
var content = html.apply(this, args),
32+
poffset = offset.apply(this, args),
33+
dir = direction.apply(this, args),
3034
nodel = d3.select(node), i = 0,
3135
coords
3236

@@ -238,10 +242,10 @@ d3.tip = function() {
238242
//
239243
// Returns an Object {n, s, e, w, nw, sw, ne, se}
240244
function getScreenBBox() {
241-
var target = d3.event.target,
245+
var targetel = target || d3.event.target,
242246
bbox = {},
243-
matrix = target.getScreenCTM(),
244-
tbbox = target.getBBox(),
247+
matrix = targetel.getScreenCTM(),
248+
tbbox = targetel.getBBox(),
245249
width = tbbox.width,
246250
height = tbbox.height,
247251
x = tbbox.x,

0 commit comments

Comments
 (0)