鼠標事件在d3圖形，縮放加載後停止工作

在我的頁面上，我使用Spine的控制器事件定義了一些事件。他們被分配到使用jQuery的代表選擇，他們很好地工作：鼠標事件在d3圖形，縮放加載後停止工作

events: 
    'click #zoom a': 'zoom' 
    'mouseenter #zoom a': -> $("#yZoom_help").show() 
    'mouseleave #zoom a': -> $("#yZoom_help").delay(1600).fadeOut 1600

異步在以後某個時間點上，我設置了一些事情與D3。具體來說，我設立一個畫布，一堆軸等的縮放行爲

@x_scale = d3.scale.linear() 
    .domain([@lcData.start, @lcData.end]) 
    .range([0, @width])  
@y_scale = d3.scale.linear() 
    .domain([@lcData.ymin, @lcData.ymax]) 
    .range([@h_graph, 0]) 

@zoom_graph = d3.behavior.zoom() 
    .x(@x_scale) 
    .scaleExtent([1, @max_zoom]) 
    .on("zoom", @graph_zoom) 

@canvas = d3.select("#graph_canvas") 
    .attr("width", @width) 
    .attr("height", @h_graph) 
    .call(@zoom_graph) 
    .node().getContext("2d")  

# ... some other things left out

的問題是，我通過這個D3設置的東西后，在非D3元素的鼠標事件停止工作。他們根本不工作。元素具有最高的z-index，並且不被任何畫布或svg元素遮擋，但是它們停止檢測任何鼠標事件。

d3應該只是在畫布上激活鼠標事件，對吧？是否有一些d3魔術正在接管整個頁面上的鼠標？例如，D3插入這個div在身：

Magic d3 div?

編輯：如果你要明白我的意思，去這個鏈接：

http://korhal.andrewmao.net:9294/#/sources/APH10154043

有一個懸停時左上角的小圖標會改變顏色。這是鼠標事件的一個;它應該顯示一條消息。一旦頁面加載，它就停止工作。如果你想看到它的工作，只需重新加載頁面並禁用調試器中的JSONP調用，這會阻止設置d3的函數執行。

來源

2012-09-21 Andrew Mao

這裏發生了什麼事實上與d3無關。在加載我的Spine應用程序時，似乎我無意中調用了@render兩次，當附加視圖時，所有元素都從其事件中解除綁定。

重新綁定可以通過調用@delegateEvents(@events)然後@refreshElements來完成，但在這種情況下，修復多餘的@render調用只是更好。

來源

2012-09-26 17:49:33

鼠標事件在d3圖形，縮放加載後停止工作

回答

相關問題