地図を横切ってd3経路を停止する

Question

私は船積みを示すd3マップを持っています。線は、投影とd3パスを使ってプロットした座標のリストとして供給されます。かなり普通のもの。問題は、パスを-179°Eから+ 179°Eにする場合に起こることです。残念ながら、それは地図を横切る。それが地図の左に出て地図の右側に再び現れるようにする方法はありますか？

Answer 1

（svg点の配列を使用して）線を結ぶ線を描く前にプロジェクション点をプロットすると、その線は反経絡を横切るときに必要に応じて動作しません。結局のところ、2次元グリッド上の点をプロットし、それらを2次元グリッド上の点であるかのように接続しているだけです。

しかし、geoPath（長い、latのフォントの配列を使用）を使用して線をプロットすると、パスは点間の最短距離（大円距離）に従います。 geoPathは、地球上のポイントを結ぶパスを2次元空間のパスに変換する3次元計算を行います。大圏距離antimeridianが

操作している場合とは無関係である - これは、二つの点の間の線はantimeridianは問題ありません

（可視十分離れと投影に依存する場合）アークう

• 手段地図はずっと簡単です。

背景機能としてすでにgeoPathを使用している可能性があります。そうでない場合は、d3.geoPath()に投影法を割り当てる必要があります。既に投影法があるので、var path = d3.geoPath().projection(projection)を使用できます。

geoPathにはgeojsonフィーチャまたはジオメトリオブジェクトが必要です。あなたが好きなもので、かなり簡単に行に1つを作成することができます。

var coords = [[-179,0],[179,0]]; 

svg.append("path") 
    .datum({ "type": "LineString", "coordinates": coords }) 

ここでパスマップの左側に落ち、そして右側にremergingの例です。 （私は太平洋のリムの特徴をスニペットのために十分に小さくすることはできないので、私はアメリカを使って回転させて、反子午線によって半分にカットされるようにしたが、それは+/- 180 。）this、二つ以上の点の間geoPathを描画するため、も参照：

var width = 500; 
 
var height = 300; 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",width) 
 
    .attr("height",height); 
 
    
 
var projection = d3.geoMercator() 
 
    .rotate([-75,0]) 
 
    .scale(50) 
 
    .translate([width/2,height/2]); 
 
    
 
var path = d3.geoPath().projection(projection); 
 

 
var usa = {"type":"FeatureCollection", "features": [ 
 
{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-94.81758,49.38905],[-88.378114,48.302918],[-82.550925,45.347517],[-82.439278,41.675105],[-71.50506,45.0082],[-69.237216,47.447781],[-66.96466,44.8097],[-70.11617,43.68405],[-70.64,41.475],[-73.982,40.628],[-75.72205,37.93705],[-75.72749,35.55074],[-81.49042,30.72999],[-80.056539,26.88],[-81.17213,25.20126],[-83.70959,29.93656],[-89.18049,30.31598],[-94.69,29.48],[-99.02,26.37],[-100.9576,29.38071],[-104.45697,29.57196],[-106.50759,31.75452],[-111.02361,31.33472],[-117.12776,32.53534],[-120.36778,34.44711],[-123.7272,38.95166],[-124.53284,42.76599],[-124.68721,48.184433],[-122.84,49],[-116.04818,49],[-107.05,49],[-100.65,49],[-94.81758,49.38905]]],[[[-155.06779,71.147776],[-140.985988,69.711998],[-140.99777,60.306397],[-148.018066,59.978329],[-157.72277,57.570001],[-166.121379,61.500019],[-164.562508,63.146378],[-168.11056,65.669997],[-161.908897,70.33333],[-155.06779,71.147776]]]]},"properties":{"name":"United States of America"},"id":"USA"} 
 
]}; 
 

 
svg.append("path") 
 
     .attr("d",path(usa)); 
 

 
var coords = [[-150,65],[-80,25],[-121,36]]; 
 

 

 

 
svg.append("path") 
 
    .datum({ "type": "LineString", "coordinates": coords }) 
 
    .attr("fill","none") 
 
    .attr("stroke","steelblue") 
 
    .attr("stroke-width",4) 
 
    .attr("d",path);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>