私はD3にかなり慣れていないので、問題を解決する方法を見落としている可能性があります。私は世界地図を持っています (geoJSON とメルカトル図法を使用)。国をクリックすると、投影法がその国に焦点を合わせます (d3.geo.path() から計算された境界ボックスを使用しているため、スケーリングされます)国を中心に変換します)。コードを参照してください:
var projection = d3.geo.mercator()
.scale(width/7)
.translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);
// relevant snippet from function clicked(d)
// Zoom on a clicked country
var bounds = path.bounds(d), // [[left, top], [right, bottom]]
dx = bounds[1][0] - bounds[0][0], // right - left
dy = bounds[1][1] - bounds[0][1], // bottom - top
x = (bounds[0][0] + bounds[1][0]) / 2, // (left - rigth) / 2
y = (bounds[0][1] + bounds[1][1]) / 2, // (top - bottom) / 2
scale = .9 / Math.max(dx / width, dy / (height - menu_height)),
translate = [width / 2 - scale * x, height / 2 - scale * y - menu_height / 2];
これは、選択した国がマップの境界線で分割されている場合を除き、うまく機能します。たとえば 、この写真のロシアのように
この場合、境界ボックスはマップ全体の幅に対応するため、国の「中心」を検出せず、国を正しく変換またはスケーリングできません。
1つの国の2つの部分に対応する2つのバウンディングボックスを取得する方法はありますか(そうではないと思います)、または回転とは無関係にロシアの左端と右端のポイントを取得し、現在の投影でそれらの位置を取得することは可能ですか?国全体を中心にできますか?
私はここで迷子になっているので、ヒントがあればとても感謝しています。