0

d3.js のメルカトル関数を使用して、svg-Element にマップを実装しました。マップは特定の都市のみを表しています。都市マップの外側のすべては、私のプロジェクトには関係ありません。

今度は、このマップに zoom() や drag() などの関数を実装したいと思います。

しかし、メルカトル マップで drag() 関数を処理するための解決策が見つかりません。変換の領域を制限することはできません。(ユーザーは、都市の地図の外に地図をドラッグできないようにする必要があります)

通常の svg 要素の場合、これは機能します。

var drag = d3.behavior.drag()
                 .on("drag", dragmove);

function dragmove(d) {
    var x = Math.max(0, Math.min('width-of-svg-element', d3.event.x));
    var y = Math.max(0, Math.min('height-of-svg-element', d3.event.y));
    d3.select(this)
    .attr("transform", "translate(" + x + "," + y + ")");
    }

しかし、私のメルカトル図ではうまくいきません。

私を助けてください ：（

前もって感謝します！

ここに小さな例があります: https://jsfiddle.net/c55w7u9e/

私の意図は、ユーザーが svg 要素の外側に赤い円 (この例では、しかし私のプロジェクトではマップ) をドラッグする可能性があってはならないということです...

4

1 に答える 1

2

更新されたフィドル: https://jsfiddle.net/thatoneguy/c55w7u9e/4/

半径を考慮していませんでした。動作していましたが、表示されません。ドラッグを次のように更新します。

function dragmove(d) {
    var x = Math.max(0, Math.min(width - radius, d3.event.x));
    var y = Math.max(0, Math.min(height - radius, d3.event.y));
    d3.select(this)
    .attr("transform", "translate(" + x + "," + y + ")");
    }

この質問からのヘルプ: Mike Bostock の d3.js dragmove 関数の説明

そしてこの例: http://bl.ocks.org/mbostock/1557377 //オフラインだと思う...

この関数を使用して制限すると、よりうまく機能します:

function dragmove(d) {
  d3.select(this)
      .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
      .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
        }

例から更新されたフィドル: https://jsfiddle.net/thatoneguy/c55w7u9e/5/

于 2016-04-15T09:57:50.253 に答える