d3.js – 使用D3的projection.stream()的正确方法是什么?

所以我正在试验一下D3的地理流API,并且事情感觉有点朦胧。我一直在阅读文档:

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

我有一个混乱的点是流转换的正确实现。假设我创建一个:

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

根据文档,this.stream引用“包装流”。但是什么是流,真的?从我可以收集的,它更多是一个过程而不是显式数据结构 – 一系列数据和函数调用来转换数据。上面的语法似乎暗示包裹流只是包含“stream listeners”的对象,

继续,我可以使用投影方法应用流转换:

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

虽然我不太明白底层的力学,效果看起来相对直截了当:路径发生器的底层变换函数用变换的x,y参数调用。

对于我的用例,我不觉得这是有帮助的,特别是因为我的输入数据还没有投影。我想使用投影首先变换数据,然后变换那些输出的坐标。为此,是否有分层变换的一般模式?

我看到D3提供的projection.stream(监听器)模式,应用投影变换之前应用监听器,但我不知道如何实现这一点。监听器参数应该是什么?这里有一个例子:http://jsfiddle.net/kv7yn8rw/2/

任何指导将非常感谢!

最佳答案
the documentation的一个关键事实是
“地理投影是流变换的一个示例”。

流只允许多次转换(例如项目)数据而不保存中间数据。投影可以只是具有流属性的对象,例如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/

转载注明原文:d3.js – 使用D3的projection.stream()的正确方法是什么? - 代码日志