2016-12-19 2 views
3

d3(ver 1.4)ドキュメントhttps://github.com/d3/d3-geo/blob/master/README.md#geoProjectionに基づいて、データの生の座標を使用するには、d3投影をnullに設定する必要があります。 nullを使用して投影が正しく表示された場合、どのように拡大縮小しますか?コードは次のとおりです。d3 geoPath.projection(null)

var path = d3.geoPath() 
    .projection(null) 
    .context(context); 

bands.features.forEach(function(d, i) { 
    context.beginPath(); 
    context.fillStyle = colors[i]; 
    context.globalAlpha = .5; 
    path(d); 
    context.fill(); 
}); 

私は自分のプロジェクションを定義しようとしましたが、プロジェクションが正しくありません。ここでは、コード

var project = d3.geoProjection(function(x,y){ 
    return [x,y] 
}); 

var path = d3.geoPath() 
    .projection(project) 
    .context(context); 

答えて

0

私はd3.projectionよりも、すでに投影デカルトデータを示すために、より適しなければなりませんd3.geoTransformを見てみましょうです。 Mike Bostockより:

ジオメトリが既に平面である場合はどうなりますか?つまり、投影されたジオメトリを取り込みながらも、それを変換したり、ビューポートに合わせてスケーリングしたりするだけの場合はどうでしょうか?

カスタムジオメトリ変換を実装して、投影処理を完全に制御できます。

function scale (scaleFactor) { 
     return d3.geoTransform({ 
      point: function(x, y) { 
       this.stream.point(x * scaleFactor, y * scaleFactor); 
      } 
     }); 
    } 

    path = d3.geoPath().projection(scale(2)); 

はあなたのようなものを使用する可能性がありますあなたのケースのために例えばthis Bl.ock

を参照してください、私はここで行うことができます(と引用符の残りを読むために)何よりも良い例を参照するにはカスタム投影を示す理由として


var project = d3.geoProjection(function(x,y){ 
return [x,y] }); 

変更/投影を歪め、私は(私は、同様の結果が、この答えをテストしていた)分かりませんが、この突起部の出力が使用可能であるならば、それはかなり簡単に拡大縮小することができます:あなたの提案のための

var project = d3.geoProjection(function(x,y){ 
return [x,y] }).scale(1000); 
0

感謝を。私の問題は規模の問題ではなく行列変換の問題であることが判明しました。私はd3marchingsquares.isobandsソフトウェアを使用しています。マーチングする正方形に送る前にデータを転置する必要がありました。

私のプロジェクトでは、https://earth.nullschool.net/と似たマップを作成しますが、Googleマップを使用しています。

私はRoger Vecianaの「d3を使ったジオテフからの等値線」デモhttp://bl.ocks.org/rveciana/de0bd586eafd7fcdfe29227ccbdcd511を採用しています。これはほぼ完了していますが、キャンバスレイヤのサイズを変更する問題があります。次に、Danny Cochranの風のついたキャンバスレイヤーを温度の輪郭の上に重ねます。最新のGoogleマップのバージョンで動作するようにDanny Cochranのコードを更新しました。