0

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

enter image description here

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"));
binny
  • 649
  • 1
  • 8
  • 22
  • The code you posted in your question will actually work! Your real problem is another one as can be seen looking at your repo. You are loading your data via `d3.json()` which is an asynchronous call returning a Promise. Although parts of your code are already dealing with that in the `then()` handler, other parts are outside of that callback and, therefore, are missing the data loaded by the async call. This question is a duplicate-in-disguise of the infamous: [*"How do I return the response from an asynchronous call?"*](/q/14220321). – altocumulus Feb 05 '21 at 12:15

1 Answers1

-1

You are not targetting the circles. Besides, don't use selectAll with an id. Use it with a class or a tag.

Go with

d3.selectAll("circle")
Eneas Marín
  • 158
  • 1
  • 5