0

単一のポイントがあるズーム可能な世界地図があります (実際には、別のリソースから複数のポイントがありますが、単純化しました)。ブロックはこちら。

ズームインしようとすると、特定のスケールにジャンプし、通常はそれ以上のズーム動作ができなくなります。のさまざまな値を試してみましたがtransition、この例scaleとこの例(後者は全体的に私が望むものに非常に近い) から取得しましたが、何も機能しませんでしたscaleExtent。最小ズームで実際のサイズにかなり近づいているように見えますが、それでも動作が悪いです。height/6

主な問題はにあると思いscaleExtentます。実際には、最小ズームをマップのサイズにしたいので、ズームインしない限りパンすることはできません。

もう 1 つの問題は、ブロックでわかるように、ズームすると円が消えることです。円の位置とサイズを維持したい (ズームしても大きく ならないようにするため)。

誰でも助けてもらえますか

  • マップのズームの問題です。マップの最小ズームは実際のサイズのマップであり、約 6 倍にズームインできます。
  • ズームインしない限りマップがパンしないようにする
  • 地図上の円のサイズと位置を維持する
4

1 に答える 1

1

あなたが指摘した最初の例に基づいて、この bl.ockにあなたが求めていると思うものの例を載せました。この行は、スケール（その目的）を期待と設定した初期スケールと互換性のないものに制限しているように見えるため、特定のレベル（この場合は高さ）を超えてズームインすると、高さと高さの間にくっつく* 6 ..scaleExtent([height, height*6])

最小ズームと初期ズームを設定すると、いくつかの問題を回避できると思います。

ドットの問題は、再描画機能でドットが参照されていないことでした。そのため、d3 をズームしたとき、ブラウザーはそれらをどう処理すればよいかわかりませんでした。私の例では、これに対処するために次のスニペットを入れました。

g.selectAll("circle")
    .attr("cx", function (d,i) { return projection(d)[0]; })
    .attr("cy", function (d,i) { return projection(d)[1]; })
    .attr("r", "10px")
    .style("fill", "red");
于 2013-09-11T11:45:30.210 に答える