1

私のページには、Spine のコントローラ イベントを使用して定義されたいくつかのイベントがあります。それらは jQuery のデリゲートを使用してセレクターに割り当てられ、正常に動作します。

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 を持ち、canvas または svg 要素によって隠されませんが、マウス イベントの検出を停止します。

d3 は、キャンバス上でのみマウス イベントをアクティブにする必要があります。ページ全体でマウスを引き継いでいる d3 マジックが進行中ですか? たとえば、d3 はこの div を本文に挿入します。

マジック d3 div?

編集：私の言いたいことを知りたい場合は、このリンクにアクセスしてください：

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

ホバーすると色が変わる小さなアイコンが左上にあります。これは、マウス イベントのあるものです。メッセージを表示することになっています。ページが読み込まれると、機能しなくなります。動作を確認したい場合は、ページをリロードして、デバッガーで JSONP 呼び出しを無効にします。これにより、d3 をセットアップする関数が実行されなくなります。

4

1 に答える 1

0

ここで起こったことは、実際には d3 とは何の関係もありません。@renderビューが追加されたときに、Spine アプリの読み込み中にうっかり 2 回呼び出して、すべての要素がイベントからバインド解除されたようです。

@delegateEvents(@events)再バインドは、 の後に を呼び出すことで実行できますが、この場合は余分な呼び出し@refreshElementsを修正する方が簡単です。@render

バックボーンに関する関連する質問: HTML の置換時にバックボーン イベントが機能しないのはなぜですか?

于 2012-09-26T17:49:33.867 に答える