JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

JavaScript

var container = d3.select("body")
  .append("svg")
  .style("position", "fixed")
  .style({
    "top": "50px",
    "width": "200px",
    "height": "200px",
    "background-color": "rgba(100,100,100, 0.5)"
  })

var color = d3.scale.category20();
var block = container.selectAll("g")
  .data([1, 2, 3, 4])
  .enter()
  .append("g")
  .attr("transform", function(d, i) {
    return "translate(" + (i * 10 + 10) + "," + (i * 10 + 10) + ")";
  })
  .attr("id", function(d, i) {
    return "obj-" + d;
  });
  
block.append("rect")
  .attr("width", 50)
  .attr("height", 50)
  .attr("fill", function(d, i) {
    return color(i);
  });
block.append("text")
	.text(function(d, i) {
    return d;
  })
  .attr("dy", ".8em");
block
  .on("click", function(d, i) {
    var block = d3.select(this);
    moveToFront(block);
  });

function moveToFront(obj) {
  container.append('use')
  .attr('xlink:href', '#'+obj.attr()[0][0].id );
}