JSFiddle - React, Tailwind, and code Playground

by MissAmberClark

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="500" height="500">
  <g>
    <circle class="bgCircle" cx="250" cy="250" r="250" />
    <circle id="A" class="popCircle" cx="200" cy="200" r="100" />
    <circle id="B" class="popCircle" cx="300" cy="200" r="100" />
    <circle id="C" class="popCircle" cx="300" cy="300" r="100" />
    <circle id="D" class="popCircle" cx="200" cy="300" r="100" />
  </g>
</svg>

CSS

.bgCircle {
  fill: blue;
  opacity: .25
}

.popCircle {
  fill: green;
  opacity: 0.5;
  stroke: black;
  stroke-width: 1px;
}

svg {
  border: 1px solid black;
}

JavaScript

d3.selectAll('.popCircle')
  .on('click', function(d) {
    var text = 'force circle ' + d3.select(this).attr('id') + ' to bottom of the popCircle stack but above the bgCircle';
    alert(text);
  });