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

<!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="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
  <style>
	@import url(https://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>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js