什么是 d3.geo.pipeline？

Posted 2023-02-23

【中文标题】什么是 d3.geo.pipeline？

【英文标题】：What is d3.geo.pipeline?

【发布时间】：2015-04-18 00:34:26

【问题描述】：

如果您关注 Mike Bostock 的块，您就会知道在过去 8 个月中 d3.geo.pipeline() 一直是他项目中的常用组件。

但是它有什么作用呢？

你看到他这样设置管道：

var sketch = d3.geo.pipeline()
      .source(d3.geo.jsonSource)
      .pipe(resample, .020)
      .pipe(jitter, .004)
      .pipe(smooth, .005)
      .sink(d3.geo.jsonSink);

via

d3.geo wiki.中没有文档

代码示例中使用的未发布D3中的一些美化JS揭示了这个功能：

lo.geo.pipeline = function() 
        var n = [];
        return 
            source: function() 
                return n[0] = arguments, this
            ,
            pipe: function() 
                return n.push(arguments), this
            ,
            sink: function() 
                for (var t, e = arguments[0].apply(null, [].slice.call(arguments, 1)), r = e; t = n.pop();) 
                    var u = [].slice.call(t, 1);
                    u.push(e), e = t[0].apply(null, u)
                
                return function() 
                    return e.apply(this, arguments), r.value && r.value()
                
            
        

它也出现在这些块中：

Back-facing Hemisphere

Multiple rotations

Satellite

【参考方案1】：

我不熟悉d3.js，但是我查看了它的源代码，发现这个功能位于分支graphics-pipeline。

例如你可以在这里找到相关代码：https://github.com/mbostock/d3/commit/a3f2adab7f85e2a0c82288ead88c1e484c9e3ea3

---

小代码sn-p来说明它是如何工作的：

var pipeline = function () 
    var pipes = [];
    return 
        source: function () 
            pipes[0] = arguments;
            return this;
        ,
        pipe: function () 
            pipes.push(arguments);
            return this;
        ,
        sink: function () 
            var sink = arguments[0].apply(null, [].slice.call(arguments, 1)),
                pipe;

            while (pipe = pipes.pop()) 
                var args = [].slice.call(pipe, 1);
                args.push(sink);
                sink = pipe[0].apply(null, args);
            

            return sink;
        
    ;
;

var log = document.getElementById('log');

function f() 
    var argsAsString = Array.prototype.join.call(arguments, ', ');
    var resultName = 'r' + f.callCounter++;

    log.innerhtml += resultName + ' = f(' + argsAsString + ')<br>';

    return resultName;


f.callCounter = 1;

pipeline().
    source(f, 'a', 1).
    pipe(f, 'b', 2).
    pipe(f, 'c', 3).
    sink(f, 'd', 4);

<div id="log"></div>

很少有关于这个功能的cmets：

方法source 和pipe 使用相同的私有属性pipes。唯一的区别是source 为pipes (pipes[0]) 设置初始值，当每次调用pipe 都会将新管道推送到集合中。 先前的事实让我们了解d3.geo.jsonSource 的内部结构。它应该类似于传递给pipe 的参数：第一个参数是可调用的（函数），其余参数 - 参数。 假设arguments = [f, a, b, c]。然后 javascript 模式 arguments[0].apply(null, [].slice.call(arguments, 1)) 表示：f(a, b, c)。您可以在 sink 实现中看到它的几个用法。

---

关于实际使用。

如果我们需要“链接”（或“管道”）数据处理，我们可以使用它。例如，如果我们有这样的代码：

function f(a, b, previousResult) 

    return a * b + (previousResult || 0);


var p = pipeline().
    source(f, 1, 1).
    pipe(f, 2, 10).
    pipe(f, 3, 100).
    sink(f, 4, 1000);

那么结果（p 的值）将是4321。

在这种特殊情况下，我们需要弄清楚d3.geo.jsonSink和d3.geo.jsonSource是什么，但我希望我能帮助你了解pipeline函数的含义。

【讨论】：

我确实在问题中发布了该功能的代码，但源链接很有帮助

@Incodeveritas，我添加了一些关于此功能的 cmets。

@Incodeveritas，我再次更新了我的答案 - 也许现在它更有用了。