2011-12-03 15 views
0

websiteのサンプルのようなパン/ズームイベントに応答するProtovisグラフがあります。これは、空のグラフを保持するPanelをカバーしています。残念ながら、(mouseovermouseout)のように、私の基礎となるグラフが通常応答します。Protovisパネルを介してイベントを渡す

これは、すべてのイベントを受け入れるようにパネルを設定する必要があるためです。 docsによると、このための唯一の有効なparamsを 'すべて'、 '塗装' され、 'どれも'

vis.add(pv.Panel) .events( "すべて")

ズームPanelがこれらのイベントをキャプチャできないようにするにはどうすればよいですか?または、どうすればその下のPanelにそれらを渡すことができますか?

答えて

0

これは必ずしもあなたが望む答えではないと思いますが、下位の要素にイベントを渡すのは簡単な方法ではありません。しかし、あなたのグラフは一例に類似している場合、あなたは、単に目に見えないPanelの順とから、イベントを受け取るべきマークに変更することができますに

vis.add(pv.Dot) 
    .event('click', function() { alert("clicked") }) 
    // ... etc 

vis.add(pv.Panel) 
    .events("all") 
    // ... etc 

を:

vis.add(pv.Panel) 
    .events("all") 
    // ... etc 

vis.add(pv.Dot) 
    .event('click', function() { alert("clicked") }) 
    // ... etc 

これが変更されますマークのzオーダーを使用して、ドットがパネルの前にクリックイベントを受け取るようにします。既存のグラフの正しいポイントにパネルを挿入する必要があるため、プラグアンドプレイは少し少なくなりますが、機能するはずです。あなたがここで例に基づいjsFiddleを見ることができます

http://jsfiddle.net/nrabinowitz/Ctxrr/

編集:以下のコメントパーを、このアプローチは、ズームイベントのために問題になる可能性があります。 this updated fiddleに示すより良いアプローチは、目に見えないマークを問題のマークの親にすることです。イベントは自動的に子から親に吹き飛ばされ、子がイベントのリスナーを設定しないと、親を妨害する。したがって、イベントを受け取る必要があるすべての前景マークがパン/ズームパネルの子である限り、これは機能するはずです。

+0

残念ながら、このようなパネルを並べ替えると、マークはパン/ズームイベントを妨げます。ユーザは、カーソルがマークの上にある間にパン/ズームを可能にする。これは、ズームアウトするときにマークがスライドし、ページの下にいっぱいにジャンプするときには、本当の問題になります。 – smith324

+0

うん、良い点。 – nrabinowitz

+0

@ smith324 - 上記の私の更新をご覧ください。このアプローチが可能な場合は、私の最初の提案よりも優れています。 – nrabinowitz

関連する問題