-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
121 lines (100 loc) · 3.09 KB
/
index.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
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Breadcrumb </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="assets/fav.png" />
<meta property="og:title" content="D3 Breadcrumbs" />
<meta property="og:description" content="Usage made easy" />
<meta property="og:image" content="https://bumbeishvili.github.io/d3-breadcrumbs/assets/share.png"
/>
<style>
body {
font-family: "Helvetica"
}
</style>
</head>
<body translate="no">
<a href="https://github.com/bumbeishvili/d3-breadcrumbs">
<img style="position:fixed;top:0;right:0;border:0;z-index:2;" width="149" height="149" src="forkme.png" alt="Fork me on GitHub">
</a>
<div class="container centered">
<div id="myGraph"></div>
</div>
<div>
<textarea>
//just edit breadcrumb's default options here and see result above
breadcrumb = d3.breadcrumb()
.container('svg')
.padding(5)
.wrapWidth(0) // hint: set 100
.height(28)
.fontSize(14)
.marginLeft(0)
.marginTop(10)
.leftDirection(false)
// show breadcrumbs
breadcrumb.show([{text:"Home"},{text:"Products"},{text:"Phones"},{text:"Some phone with large name"},{fill:'black',text:'summary goes here'}]);
</textarea>
</div>
<script src="libs/d3.v4.min.js"></script>
<script src="libs/codemirror.js"></script>
<script src="libs/javascript.js"></script>
<LINK REL=StyleSheet HREF="libs/codemirror.css" TYPE="text/css">
<script src="breadcrumb.js"></script>
<script>
//initialize code editor
var myCodeMirror = CodeMirror.fromTextArea(
document.getElementsByTagName('textarea')[0],
{
lineNumbers: true,
mode: "javascript",
matchBrackets: true,
}
);
myCodeMirror.on("change", function (cm, change, text) {
var value = myCodeMirror.getValue();
eval(value)
});
</script>
<script>
var svg = d3.select('#myGraph')
.append('svg')
.attr('width', 500)
.attr('height', 400)
.style('overflow', 'visible');
//initialize
var breadcrumb = d3.breadcrumb()
.container('svg')
.padding(5)
.wrapWidth(1200)
var topY = 230;
svg.append('text').text('Hover to see :)').attr('y', 200).attr('x', 100)
svg.selectAll('rect')
.data(d3.range(100).map(d => d - 1))
.enter()
.append('rect')
.attr('fill', 'aqua')
.attr('width', 20)
.attr('height', 20)
.attr('y', (d, i) => {
return topY + 21 * Math.floor(i / 25);
})
.attr('x', (d, i) => {
return 100 + (i % 25) * 21;
})
.on('mouseenter', function (d, i) {
svg.selectAll('rect')
.filter(d => d < i)
.attr('fill', 'orange')
var items = d3.range(i + 1).map(d => { return { text: d } });
breadcrumb.show(items);
})
.on('mouseleave', function (d) {
svg.selectAll('rect').attr('fill', 'aqua')
breadcrumb.hide();
})
</script>
</body>
</html>