如何縮放d3.js DotsChart而不是lineChart

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

工作，它需要在更新fonction前costruct DOM.Circle.data：

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

和中庸之道更新.attr（）上的變焦事件

// for update Attribute of line and Dots on ZoomEvent 
g.updateCurve = function(){ 
    // Update the 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