score:1

Accepted answer

You already have a circle in your legend. Therefore, when you do...

g.selectAll("circle")

... you are selecting that circle and appending a data point to it.

The solution is selecting nothing:

g.selectAll(null)

Or, if you plan to have an update selection, select by class:

g.selectAll(".foo")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "foo)
  //etc...

Here is the result: https://codesandbox.io/s/pedantic-joliot-golgz?fontsize=14


Related Query

More Query from same tag