Question

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

然而，我的主要问题是它们都使用“rect”对象，即使我追加它们，我后面添加的对象也会阻塞第一个。两个rects的代码如下：

这个负责缩放：

  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)

缺少脚本，这就是它无法正常工作的原因。

D3JS - 结合“rect”功能

1 个答案: