☰

D3 の projection.stream() を使用する適切な方法は何ですか? 質問する

tag-icon • tag-icon d3.js geo d3.geo
D3 の projection.stream() を使用する適切な方法は何ですか? 質問する

で少し実験しているのですD3's geo stream APIが、少し曖昧な感じがします。ここでドキュメントを読んでいます:

https://github.com/mbostock/d3/wiki/Geo-Streams

私が混乱している点の 1 つは、ストリーム変換の適切な実装です。次のようなものを作成したとします。

//a stream transform that applies a simple translate [20,5]:
var transform = d3.geo.transform({
    point:function(){this.stream.point(x+20,y+5)}
})

文書によれば、このストリーム「ラップされたストリーム」を参照します。しかし、ストリームとは実際何でしょうか? 私が理解している限りでは、それは明示的なデータ構造というよりもむしろ手順であり、データのシーケンスとデータを変換するための関数呼び出しです。上記の構文は、ラップされたストリームが単に「ストリームリスナー「

次に、投影法を使用してストリーム変換を適用します。

//a path generator with the transform applied using the projection() method
var path = d3.geo.path().projection(transform);

基礎となる仕組みはよくわかりませんが、効果は比較的単純なようです。パス ジェネレーターの基礎となる変換関数が、変換されたx,y引数で呼び出されます。

私のユースケースでは、特に入力データがまだ投影されていないため、これはあまり役に立ちません。まず投影を使用してデータを変換し、次に出力された座標を変換したいと思います。そのために、変換を階層化するための一般的なパターンはありますか?

D3projection.stream( を提供していることがわかりました。リスナー) パターンは、リスナーを適用する前に、まず投影変換を適用しますが、これをどのように実装すればよいかわかりません。リスナー引数は何にすべきでしょうか? 次に例を示します。http://jsfiddle.net/kv7yn8rw/2/。

どのようなご指導もいただければ幸いです。

ベストアンサー1

重要な事実ドキュメント「地理投影はストリーム変換の一例である」ということです。

ストリームを使用すると、中間データを保存せずにデータを複数回変換 (例: 投影) できます。投影は、ストリーム属性を持つオブジェクトにすることができます (例:proj_then_transform下記)。

ストリームを連鎖させる方法は次のとおりです。

// stream 1
var proj = d3.geo.equirectangular();
// stream 2
var transform = d3.geo.transform({
    point:function(x,y){this.stream.point(x+20,y+5)}
});
// stream 1 then stream 2
var proj_then_transform = {
        stream: function(s) { 
            return proj.stream(transform.stream(s)); 
        }
     };

実用的なソリューションで例を更新しました:http://jsfiddle.net/cvs5d7o9/2/

おすすめ記事