Accepted answer

I second @TomShanley answer but you should not be using the enter .data[[data]] as you are not using the data itself. You should instead just add svg elements using d3. Later on you can add the data as needed to create the circles.

You should also not have <svg> elements inside <g> or others <svg>

Here is the updated fiddle:


The enter selection that you are using for the circles, is based off the append for the line that uses .data([data]). While this is OK for lines/paths (as you want one element), this won't work when you want separate elements per datum.

You should do a separate selectAll("circle").data(data).enter()...etc, where the data is not in the square brackets. This will give you separate elements for each circle.

Related Query

More Query from same tag