d3.js - lineChart の代わりに d3.js DotsChart をズームする方法

Question

点グラフを線のようにズームしたいのですが、各点がズームステップで複製されます。

g.updateCurve = function(_){
    // Update the 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;
};

適切なズームに変更するにはどうすればよいですか?

私はこのJSFiddleに取り組んでいます

Answer 1