d3js：散点图缩放。只有轴在缩放而不是数据

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)
   

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