d3js：scatterplot zoom。只有轴是缩放而不是数据

Question

尝试创建一个可以缩放的散点图，但只有轴会变焦，而不是数据。无法弄清楚任何人对这个问题有什么帮助吗？

项目的github链接：scatterplot with zoom

Answer 1

我看到缩放工作方式存在两个不同的问题：

1. 缩放时，您没有正确选择<circle> s（散点图中的点）。因此，只有缩放时，轴才会发生变化（如您所述）。解决此问题的一种简单方法是为每个<circle>提供一个类（例如class="dot"），然后使用它来选择它们。

   首先将class =“dot”添加到每个圆圈（第140行）：

   svg.selectAll("dot")
           .data(data)
           .enter().append("circle")
           .attr("class", "dot")
   

   然后更新function zoom以正确选择它们（第~195行）：

   svg.selectAll(".dot") // <---- select all circles with class "dot"
           .attr("cx", function(d) { return x(d.date); })
           .attr("cy", function(d) { return y(d.close); });
   

2. 此时只有当您尝试放大轴或单个点时才会出现缩放。如果您希望用户能够放大，无论鼠标在散点图上的哪个位置，您都可以添加背景<rect>，以确保检测到SVG的缩放事件。

   svg.append("rect")
       .style("fill", "#fff")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
   

进行这两项更改可以修复缩放。