I'm having an issue making a selection of <circle>
elements subsequent to appending them within the containing SVG. As shown in the image they are rendered in the browser and exist within the DOM.
If <circle>
s are directly append to SVG as the parent, D3 picks upon on the circle elements. The problem appears to be with the circles nested within the <g>
element and that's were I get an empty selection. What is causing this behavior and what can be done to resolve this to get the expected result of selecting all circles?
My repo is attached to get a full look at what I'm doing. I copied what I felt was most relevant to the question being asked? Project repo
let gCircles = svg.append('g')
.attr("transform",
translate(${margin.left}, ${margin.top}))
.attr("id", "circle_data");
gCircles.selectAll("circle")
.data(response).enter().append("circle")
.attr("cx", (d, i) => xScale(years[i]))
.attr("cy", (d, i) => yScale(times[i]))
.attr("r", 7)
.attr("fill", (d) => {
const accusation = d.Doping.toLowerCase();
return regex.test(accusation) ? red : blue
});
let circles = d3.selectAll("#circle_data");
console.log(circles.selectAll("circle"));