Built with blockbuilder.org
xxxxxxxxxx
<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"}]);
</textarea>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="codemirror.js"></script>
<script src="javascript.js"></script>
<LINK REL=StyleSheet HREF="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>
https://d3js.org/d3.v4.min.js