d3通過鼠標懸停在圖形上調用圖形上的縮放

我將調用縮放附加到我的圖形上，它工作正常。d3通過鼠標懸停在圖形上調用圖形上的縮放

當我將鼠標懸停事件附加到圖表中的項目（矩形）時，鼠標懸停會觸發，但不會調用縮放。

我想要一個鼠標滾動使一個工具提示出現，'鼠標點擊並拖動'使圖表只在y軸上平移。

有沒有一種簡單的方法讓這些一起工作，或者我應該如此例中定製事件？

http://bl.ocks.org/stepheneb/1182434

bar = g.selectAll(".bar") 
      .data(currentData) 
      .enter().append('rect') 
      .attr("class", "horizontal bar") 
      .attr("x", 0) 

     .attr("height", ordinalScale.rangeBand()) 
      .attr("y", function(d) { 
      return ordinalScale(d.key); 
     }) 
      .attr("width", 0) 
      .on("mouseover", function(d) { 

      tooltip = d3.select("body").append("div") 
       .attr("class", "tooltip") 
       .style("opacity", 0); 


      tooltip.style("left", (d3.event.pageX - 80) + "px") 
       .style("top", (d3.event.pageY) + "px") 
       .append('p') 
       .text(d.key) 
       .attr('class', 'tootip-key') 
       .append('p') 
       .text(d.value) 
       .attr('class', 'tooltip-value'); 

      tooltip.transition() 
       .duration(200) 
       .style("opacity", 0.9); 

     }) 

      .on("mouseout", function(d) { 

      tooltip.remove(); 


     });

和變焦行爲附加像這樣。

g.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .attr("pointer-events", "all") 
     .call(d3.behavior.zoom().on("zoom", zoom));

謝謝！

來源

2013-04-05 SirGanya

所以......你正試圖從mouseover事件調用縮放行爲？或者你想要一個鼠標懸停事件，然後當你點擊它縮放？你究竟想要做什麼以及你的代碼是什麼？ – 2013-04-05 22:40:43

-2

獲取工具提示的最簡單方法是將svg:title元素附加到您想要提供工具提示的元素。其餘的部分將由瀏覽器處理。如果您需要更棒的產品，請看tipsy。

要限制平移到y軸，只需忽略處理函數中x值的轉換（在您的情況下爲zoom）。

來源

2013-04-16 18:49:00

d3通過鼠標懸停在圖形上調用圖形上的縮放

回答

相關問題