d3.js - 如何缩放 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

它需要在更新函数之前构建 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;
};

JSFiddle 上的工作示例