Skip to content

Instantly share code, notes, and snippets.

@eesur
Last active November 6, 2019 08:21
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eesur/4e0a69d57d3bfc8a82c2 to your computer and use it in GitHub Desktop.
Save eesur/4e0a69d57d3bfc8a82c2 to your computer and use it in GitHub Desktop.
d3 | SVG to the front and back

Moving an SVG selection to the front/back

Rolling over boxes bring them to front, and clicking them sends them to the back.

D3 is often used to create and manipulate SVG. Other than with HTML, the order of SVG elements define their visibility (whereas in HTML we have something like z-index). So we are often missing the functionality of moving an SVG selection to the front/back as it is known from Adobe Illustrator.

source: d3-extended

(function() {
'use strict';
var data = d3.range(0, 40); // [0, 1, 2, 3, 4 etc]
console.log('number of items in array: ' + data.length);
// https://github.com/wbkd/d3-extended
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
var colour = d3.scale.category10();
// vars
var rectWidth = 100,
rectHeight = 300;
var svg = d3.select('#container').append('svg');
// set width & height in css
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr({
width: rectWidth,
height: rectHeight,
x: function(d,i) {
// overlap the rects intentionally
return (rectWidth-40)*i;
},
y: 10
})
.style({
fill: function(d, i) {
return colour(i);
},
stroke: 'none'
})
.on('mouseover', function(d) {
d3.select(this).moveToFront();
})
.on('click', function(d) {
d3.select(this).moveToBack();
});
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 | move to front</title>
<meta name="author" content="Sundar Singh | eesur.com">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400);
body {
font-family: "Source Code Pro", Consolas, monaco, monospace;
background-color: #130C0E;
padding: 20px 0;
margin: 0 auto;
width: 100%;
height: 600px;
}
p {
line-height: 1.5;
font-size: 18px;
color: #7AC143;
font-weight: 400;
margin: 0;
padding: 20px 0;
letter-spacing: 1px;
width: 700px;
margin: 0 auto;
}
svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header>
<p>Moving an SVG selection to the front/back. <br>
Rolling over boxes will bring them to front, and clicking them, send them to the back.</p> </header>
<section id="container"></section>
<script src="d3_code_move.js" charset="utf-8"></script>
</body>
</html>
@averydev
Copy link

averydev commented Apr 4, 2017

Stumbled on this, and figured I'd point you to raise() and lower() in case you aren't already familiar with them since this is one of the top hits on google...

https://github.com/d3/d3-selection#selection_lower
https://github.com/d3/d3-selection#selection_raise

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment