D3JS - 结合“矩形”功能

Question

所以我正在努力结合以下两个功能：

• Brush and zoom, whit dragging and scroll zooming

• Displaying values when hovered over

然而，我的主要问题是它们都使用“rect”对象，即使我附加了它们，我稍后附加的那个也会阻止第一个。两个矩形的代码如下：

这个负责缩放：

  svg.append("rect")
      .attr("class", "zoom")
      .attr("width", width)
      .attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);

这个负责悬停功能：

  svg.append("rect")
    .attr("class", "hoverRect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .on("mouseover", function() { focusDisplay.style("display", null); })
    .on("mouseout", function() { focusDisplay.style("display", "none"); })
    .on("mousemove", mousemove);

我尝试将它们两者结合起来，但结果与我稍后添加第二个相同（没有缩放功能，只有悬停动作）：

  svg.append("rect")
    //.attr("class", "hoverRect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .on("mouseover", function() { focusDisplay.style("display", null); })
    .on("mouseout", function() { focusDisplay.style("display", "none"); })
    .on("mousemove", mousemove)
    .attr("class", "zoom")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

如果您有任何想法，非常感谢您！

Answer 1

我才发现

.on("mousemove",mousemove)

脚本丢失，这就是它不起作用的原因。