2017-11-28 10 views
1

興味のある場所がインタラクティブなマップをsvgサークルとして表示しています。各円にはタッチスタートまたはマウスイベントがあり、透明な四角形はd3.zoom()にバインドされているので、地図を拡大できます!私はズームをピンチ、そして私の脂肪の指の一つは、これらの円のいずれかにあることを起こる、ズームはIない限り、自分の携帯電話に奇妙な動作するかどうv3のd3.jsズーム伝播:1本の指が子要素の上にあるときにマップをピンチでズームする

<div id="map"> 
    <svg> 
     <g><rect></rect></g> <!-- transparent rect bound to d3.zoom() --> 
     <g> 
      <circle></circle> <!-- places of interest with touchstart listeners --> 
      <circle></circle> 
      ... 
     </g> 
    </svg> 
</div> 

:あなたは要素を検査した場合、ここで設定しています円はそのようにタッチするたびに発生するから、ズームを防ぐ:

selection.append("circle").on("touchstart mousedown",function(d,i){ 
     d3.event.preventDefault(); // no zoom for you 
     // ... code to highlight circle or whatever 
    } 

この方法は、ユーザーが誤っ円または関心の代わりに指一本でズームした場合、円のハイライトとズームが解除されます。 thisのディスカッションや同じディスカッションのissue 66も、これをうまく設定してくれました。

ズームは、ユーザーがズームするときに関心のある場所を避けることを条件として、機能します。

私が本当にやりたいことは、これを逆に設定して、ズームを最優先にすることです。

ズーム矩形の内側に円を配置しようとしましたが、もちろん円はタッチイベントを受け取りません。関心のある場所とのやりとりができなくなったときにマップが完全にズームするため、残念です。

興味のある場所を私が望むよりも小さくすることによって、現時点では私が慣れています。そのため、ユーザーは地図上でズームする機会を増やすことができます。これはもちろん最適以下です。

多分私はタッチイベントの直感的な理解を得るだろうが、今のところ私は迷子になるとこれにアプローチする方法を謙虚に尋ねる。私の地図のズームスタートにズームを優先させる方法に関する提案は大変ありがたいです。読んでくれてありがとう。

答えて

0

これは私のtumbleweedバッジを得ました。私はキャンバスを使ってすべてのサークルを作成することでこれを解決しました。 d3ズーム付きのキャンバスサークル付きのsvgマップ。 d3要素があり、要素上に1本の指を置き、地図上に1本の指を置き、ピンチズームを試みると機能しません。キャンバスとポインタトラッキングを使用することでこれが解決されます。

これは完成した地図とプロジェクトです。https://pixelsandplans.com/live/flow/

関連する問題