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("div")
  .classed("random", true)
  .style("position", "fixed")
  .style({
    "top": "50px",
    "width": "200px",
    "height": "200px",
    "background-color": "rgba(100,100,100, 0.5)"
  })

var color = d3.scale.category20();
container.selectAll("span")
  .data([1, 2, 3, 4])
  .enter()
  .append("span")
  .style({
    "position": "absolute",
    "width": "50px",
    "height": "50px"
  })
  .style("margin", function(d, i) {
    return i * 10 + 10 + "px";
  })
  .style("background-color", function(d, i) {
    return color(i);
  })
  .text(function(d, i) {
    return d;
  })
  .attr("id", function(d, i) {
    return "obj-" + d;
  })
container.selectAll("span")
  .on("click", function(d, i) {
    var block = d3.select(this);
    // this is the part I can not figure out ================
    moveToFront(block);
  });
var topZindex = 1;

function moveToFront(obj) {
  topZindex++;
  obj.style('z-index', topZindex);
}

container.append('use')
  .attr('class', 'bar')
  .attr(':xlink:href', '#obj-2');