forked from caged/d3-tip
/
circles.html
111 lines (98 loc) · 2.57 KB
/
circles.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<title>d3.tip.js - Tooltips for D3</title>
<meta charset="utf-8" />
<title>Circles</title>
<script type="text/javascript" src="../bower_components/d3/d3.js"></script>
<script type="text/javascript" src="../index.js"></script>
<link rel="stylesheet" type="css" href="example-styles.css">
<style type="text/css">
body {
padding: 40px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
}
.d3-tip text {
fill: #fff;
font-size: 12px;
stroke: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
circle {
fill: #ccc;
fill-opacity: 0.6;
stroke: #bbb;
stroke-width: 1px;
}
circle:hover {
fill: #bbb;
stroke: #999;
}
circle.clickable:hover {
cursor: pointer;
}
.rule {
stroke-width: 1px;
stroke: #c00;
shape-rendering: crispedges;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [],
random = d3.random.normal(5),
random2 = d3.random.irwinHall(1)
for(var i = 0; i < 100; i++) data.push(random(i))
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return d.toFixed(2) })
.direction('nw')
.offset([0, 3])
var tip2 = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return d.toFixed(2) })
.direction('n')
.offset([-3, 0])
var w = 1000,
h = 500,
r = 10,
linex, liney,
x = d3.scale.linear().domain([0, data.length - 1]).range([r, w - r]),
y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0])
var vis = d3.select(document.body)
.append('svg')
.attr('width', w)
.attr('height', h)
.append('g')
.attr('transform', 'translate(20, 20)')
.call(tip)
vis.selectAll('circle')
.data(data)
.enter().append('circle')
.attr('r', function(d, i) { return random2(i) * 10 })
.attr('cx', function(d, i) { return x(i) })
.attr('cy', y)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
var vis2 = d3.select(document.body)
.append('svg')
.attr('width', w)
.attr('height', h)
.append('g')
.attr('transform', 'translate(20, 20)')
.call(tip2)
vis2.selectAll('circle')
.data(data)
.enter().append('circle')
.attr('class', 'clickable')
.attr('r', function(d, i) { return random2(i) * 10 })
.attr('cx', function(d, i) { return x(i) })
.attr('cy', y)
.on('click', function(d) {
tip2.hide(d).show(d)
})
</script>
</body>
</html>