2

d3 でオンライン マッピングを実行しようとしていますが、2 点間に線をプロットしようとすると問題が発生します。

2 つのポリゴン (ソースとターゲット) の重心を計算しました

コード内:

var projection = d3.geo.mercator()
    .scale(width)
    .translate([0, 0]);

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

JS コンソールから:

> path({type: "LineString",
      coordinates: [path.centroid(source_country), path.centroid(target_country)]});

"M277.05056877663407,121.67976219138909L-694.1792414247936,NaN"

それでも、セントロイドの計算はうまく機能しているようです (これらのポイントをプロットすると、マップ上に表示されます)。

> [path.centroid(source_country), path.centroid(target_country)]

[
Array[2]
0: 103.89396329123777
1: -41.453727169465765
length: 2
__proto__: Array[0]
, 
Array[2]
0: -260.3172155342976
1: -245.57309459883245
length: 2
__proto__: Array[0]

LineString 用に生成されたパスの最後に NaN が表示される理由はありますか?

4

2 に答える 2

4

ここでの問題は、緯度/経度座標を 2 回投影していることです。オペレーターは、path()緯度/経度を取り、ピクセルに投影することを期待しています。このpath.centroid()メソッドは、緯度/経度のジオメトリも想定しており、ピクセルベースの投影も生成します。

したがって、 を呼び出すpathと[path.centroid(...), path.centroid(...)]、既に投影された座標を投影しようとしています。これはNaN、ピクセル座標の y 位置 -245 が経度値の範囲外であるためです。

これを修正する最も簡単な方法は、おそらくd3.svg.lineセントロイド-セントロイド パスを作成するために使用することです。私はこれをテストしていませんが、次のようになると思います。

var line = d3.svg.line();
line([path.centroid(source_country), path.centroid(target_country)]);
于 2012-11-20T17:58:06.007 に答える