javascript - 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)
   

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