D3JS-結合“ rect”功能

Question

因此，我正在努力結合以下兩個功能：

• 筆刷和縮放，白色拖動和滾動縮放

• 懸停時顯示值

但是，我的主要問題是它們都使用一個“ 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)

腳本丟失了，這就是它不起作用的原因。