JSFiddle - React, Tailwind, and code Playground

by Nivaldo

CSS

.oneSvg {
    background-color: lightsteelblue;
    margin: 10px;
}

.multipleSvg {
    background-color: lightpink;
    margin: 10px;
}

JavaScript

// single SVG, probably what you want
var data = [10,20,30];

var svg = d3.select("body")
  .append("svg")
    .attr("class","oneSvg")
    .attr("width", 100)
    .attr("height",100)
  .append("g")
    .attr("transform", "translate(0,0)");

circles = svg.selectAll("circle")
    .data(data);

circles
  .enter()
  .append("circle")
    .attr("cx",function (d) {return d;})
    .attr("cy",20)
    .attr("r",5)
    .style("fill","blue");

// multiple SVGs, what you have now...
var data = [10,20,30];

var svg = d3.select("body").selectAll(".multipleSvg")
    .data(data)
  .enter()
  .append("svg")
    .attr("class","multipleSvg")
    .attr("width", 100)
    .attr("height",100)
  .append("g")
    .attr("transform", "translate(0,0)");

svg
  .append("circle")
    .attr("cx",function (d) {return d;})
    .attr("cy",20)
    .attr("r",5)
    .style("fill","red");