JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<div class = "svgTestHolder">
	<svg class = "svgTest" width="100%" height="100%" viewBox="0 0 800 800"></svg>
</div>

CSS

.svgTestHolder{
		width:50%;
		margin-left: -10px;
	}

JavaScript

var theSvg = d3.select(".svgTest");

var theNumbers = [5, 10, 15, 20, 25, 30];
var theCircles = ["a&5", "a&10", "b&15", "b&20", "b&25", "b&30", "a&30", "b&10"];

var numCircle = theSvg.selectAll("text")
					.data(theNumbers)
					.enter()
					.append("text")
					.text(function(d){ return d;})
					.attr("transform", function(d, i){
						return "translate(" + (400 + 350 * Math.cos((i/theNumbers.length) * 360 * Math.PI/180)) + "," 
							+ (400 + 350 * Math.sin((i/theNumbers.length) * 360 * Math.PI/180)) + ")";
					});

var circs = theSvg.selectAll("circle")
				.data(theCircles)
				.enter()
				.append("circle")
				.attr("r", 15)
				.attr("fill", "#f00")
				.style("opacity", 0.3)
				.attr("transform", function(d){

					var sizeDif = 800/(d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["width"]);


					var theNum = parseInt(d.split("&")[1]);
					var thePosition = theSvg.selectAll("text").filter(function(e){
					 return e == theNum;
					})[0];
					var theCoords = thePosition[0].getBoundingClientRect();

					var leftOffset = d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["left"];
					var leftOffset2 = d3.select(".svgTest")[0][0].getBoundingClientRect()["left"];
					var bottomOffset = d3.select(".svgTestHolder")[0][0].getBoundingClientRect()["top"];
					var bottomOffset2 = d3.select(".svgTest")[0][0].getBoundingClientRect()["top"];

					
					return "translate(" + ((theCoords["left"] - leftOffset - leftOffset2)  * sizeDif) + "," + ((theCoords["top"] - bottomOffset - bottomOffset2) * sizeDif) + ")";
				})