How to zoom a d3.js DotsChart instead of lineChart -

i want zoom dot chart line each point duplicated zoom step.

g.updatecurve = function(_){     // update line path.     this.select(".line")     .attr("d", line);      // add each point     this.selectall('.circle').data(data).enter().append("circle")     .attr("class", "dot")     .attr("cx", function(d) {return xscale (d.date); })     .attr("cy", function(d) {return yscale (d.yspeed); })     .attr("r", function(d) {return rscale (d.xspeed); });      return this; }; 

how can change proper zoom ?

i work on jsfiddle

it need costruct dom.circle.data before update fonction:

g.selectall('circle').data(data).enter().append("circle")     .attr("class", "dot"); 

and juste update .attr() on zoom event

// update attribute of line , dots on zoomevent g.updatecurve = function(){     // update line path.     this.select(".line")     .attr("d", line);      // add each point     this.selectall('circle')     .attr("cx", function(d) {return xscale (d.date); })     .attr("cy", function(d) {return yscale (d.yspeed); })     .attr("r", function(d) {return rscale (d.xspeed); });      return this; }; 

working exemple on jsfiddle