3

マップの範囲を動的に変更することは現在不可能であることを知っています。

だから代わりに私はしようとしています:

マップを作成する イベントが発生したら、マップを廃棄し、新しい投影法を含む新しい詳細で新しいマップを描画します。

問題は、古い地図を適切にスクラップできないことです。私はマップ変数を取り、svg プロパティで remove() を呼び出し、パフォーマンスのために「delete svg」を使用してから、オブジェクトを分解しようとしていました。次に、マップ変数を関数 A の結果に再割り当てします。ここで、関数 A は新しいマップを設定するだけです。

新しいマップを作成する関数:

function createMap (latlon){
var basicMap = new Datamap({
  element: document.getElementById("basic"),
    setProjection: function(element) {
var projection = d3.geo.equirectangular()
  .center(latlon)
  .rotate([0, 0])
  .scale(1200)
  .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
  .projection(projection);

return {path: path, projection: projection};
},
  projection: "mercator",
  scope: 'world',
   fills: {
        defaultFill: "#ABDDA4",
      },
  responsive: true,
    done: function(datamap){
        datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));
        $("#resetZoom").on("click", function(){
   resetZoom();
})
        function redraw() {
            datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }
        function resetZoom() { datamap.svg.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); }
},
});
return basicMap
}

破壊する機能:

function cleanUp(map){
map.svg.remove();
delete map.svg;
delete map;

}

次のようにマップを初期化basicします

basic = createMap([2,46]);

その後、マップを消去して (破棄関数)、再割り当てします。

cleanUp(basic);
basic = createMap([personLon, personLat])

表面的には、問題なく動作します。そして、パフォーマンスは大丈夫です。しかし、実際には正しく機能していません。たとえば、ズーム機能が機能しなくなりました。ズームボタンが押されると、マップ変数を探して、もう見つけることができません。新しいマップはボタンなどの新しいクリックハンドラーを作成するため、これは意味がありません。それはほとんど動作します。

しかし、これはうまくいきません。任意のヒント？ありがとう。

4

3 に答える 3

3

私は同じ問題を抱えていて、JQueryを使用して要素を削除してから、同じ要素を再度追加することで解決しました。ちょっとしたハックのように思えますが、私にとってはうまくいきます。

        $("#drilldown-map").parent().append( "<div id='drilldown-map' />");
        $("#drilldown-map").remove();

        var mapData = getMapData();
        var map = new Datamap(mapData);
于 2016-02-12T17:11:50.000 に答える
1

Angular1.5 ソリューション (上記の jquery の回答に基づく) を探している人がここに来たら、使用できます data-ng-if="showMap" (showMap は true または false のいずれかです)。False を指定してマップを削除し、投影オプションをリセットしてから、showMap を再度 True に設定すると、新しい投影法でページに再度追加されます。

これは、d3 を直接ハッキングせずにこれまでに見つけた唯一の解決策です。

于 2016-11-17T16:39:08.887 に答える