JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viz"></div>

JavaScript

var width = 500;
var height = 400;
var focusedElement;
var svg = d3.select("#viz")
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 " + width + " " + height)
  .append('g');
var outer = svg.append('g')
  .attr('transform', "translate(" + width / 2 + "," + height / 2 + ")")
  .attr('class', 'boundry');

var boundry = outer.append("svg:circle")
	.attr("tabindex", 1)
  .attr("r", 100)
  .attr("class", "primary-parent")
  .attr('fill', 'red')
  .attr('stroke', "yellow")
  .attr("stroke-width", 5);

var setWindowClickListener = function(e) {
	if (e.target !== focusedElement) {
  	focusedElement = null;
    window.removeEventListener('click', setWindowClickListener);
    alert('blur');
  }
};

d3.selectAll('.primary-parent')
.on('click', function() {
	alert('click');
	focusedElement = d3.event.target;
  window.addEventListener('click', setWindowClickListener);
});