3

解決できない問題がいくつかあります。これを簡単にするために、私が何をしようとしているのかを説明するためにいくつかのストック例のみを使用します.

http://bl.ocks.org/mbostock/5126418 -- この基本機能

私が探しているのは、マップ上の「トラクト」をクリックすると非表示になり、選択したトラクトが画面の中央に配置されて展開されるときです

私の問題は、これを試すたびに、選択したオブジェクトが画面から押し出されることです。

私は何か間違ったことをしていると確信しています私はD3を初めて使用し、数日間しか使用していません

.on("click", function(d){
    svg
    .append("g")
    .attr("id", "tract")
    .append("g")
    .attr("id", "wrapper")
    .selectAll("path")
    .data([d])
  .enter()
    .append("path")
    .attr("d", path)
    .attr("id", "tract"),
d3.select("#wrapper")
            .transition()
            .duration(800)
            .ease("cubic-bezier(0.785, 0.135, 0.150, 0.860)")
            .attr("transform", "scale(" + 3 + "), translate(" + (width/2) + ", " + (height/2) + ")");
})

これは私を夢中にさせているので、どんな助けも大歓迎です。

4

1 に答える 1

5

私はd3も初めてです-私がそれをどのように理解しているかを説明しようとしますが、すべてが正しいかどうかはわかりません.

投影には、地図単位で与えられる中心の概念があります。

project.center([場所])

中心が指定されている場合、投影の中心を指定された位置 (度単位の経度と緯度の 2 要素配列) に設定し、投影を返します。中心が指定されていない場合、現在の中心を返します。デフォルトは ⟨0°,0°⟩ です。

また、投影の中心が画面のどこにあるかをピクセル単位で表す変換もあります。

project.translate([ポイント])

ポイントが指定されている場合、投影の平行移動オフセットを指定された 2 要素配列 [x, y] に設定し、投影を返します。ポイントが指定されていない場合、現在の移動オフセットを返します。デフォルトは [480, 250] です。移動オフセットは、投影の中心のピクセル座標を決定します。デフォルトの平行移動オフセットは、960×500 領域の中心に ⟨0°,0°⟩ を配置します。

その秘密は、いくつかのメソッドが地図空間で動作し、他のメソッドがキャンバスで動作することを知っていることです。

キャンバスのフィーチャを中央に配置するには、投影の中心をフィーチャの境界ボックスの中心に設定します。これはメルカトル図法 (Google マップで使用される WGS 84) で機能しますが、他の投影法については不明です。

たとえば、射影とパスが与えられた場合:

var projection = d3.geo.mercator()
    .scale(1);

var path = d3.geo.path()
    .projection(projection);

boundsメソッド frompathは、バウンディング ボックスをピクセル単位で返します。これを使用して、ピクセル単位のサイズとマップ単位のサイズを比較して、正しい縮尺を見つけます (0.95 は、幅または高さの最適なフィットに対して 5% のマージンを提供します)。

var b = path.bounds(feature),
    s = 0.95 / Math.max(
                   (b[1][0]-b[0][0])/width, 
                   (b[1][1]-b[0][1])/height
               );

メソッドを使用してd3.geo.bounds、マップ単位で境界ボックスを見つけます。

b = d3.geo.bounds(feature);

投影の中心をバウンディング ボックスの中心に設定します。

projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]);

メソッドを使用してtranslate、マップの中心をキャンバスの中心に移動します。

projection.translate([width/2, height/2]);

ここまでで、マップの中心にあるフィーチャが 5% のマージンでズームされているはずです。

于 2013-06-12T06:07:06.037 に答える