I don't understand why my click event handler doesn't work. I know the event handler is running because I can see output for the three console.log() statements. The trouble is that the click event does not change the fill color. My code is all contained in one Observable notebook cell. I am using d3 version 7.3.0.

chart = {

  const height = 200;
  
  const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height);

  let my_circles = svg
    .selectAll("circle")
    .data(d3.range(10))
    .enter()
    .append("circle")
      .attr("cx", d => d * 50)
      .attr("cy", height / 2)
      .attr("r", d => Math.random() * 20)
      .attr("fill", "blue");

  my_circles
    .on("click", (event, d) => {
          console.log(event);
          console.log(d);
          console.log(d3.select(this));
          d3.select(this).attr("fill", "orange");
      });

  return svg.node();
}

Help is appeciated and thank you.

Paul