Что такое d3.geo.pipeline?

Question

Если вы следуете bl.ocks Майка Бостока, вы знаете, что за последние 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.

Некоторые украсили JS в неизданном D3 используется в примере коды показывает это функции:

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() 
       } 
      } 
     } 

Он также появляется в этих bl.ocks:

• Back-facing Hemisphere

• Multiple rotations

• Satellite

Answer 1

Я не знаком с d3.js, но я смотрел на его и обнаружил, что эта функция находится в филиале graphics-pipeline.

Например, вы можете найти соответствующий код здесь: https://github.com/mbostock/d3/commit/a3f2adab7f85e2a0c82288ead88c1e484c9e3ea3

---

небольшой фрагмент кода, чтобы проиллюстрировать, как это работает:

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>

Несколько замечаний по поводу этой функции:

1. Методы source и pipe Работа с одинаковой частной собственностью pipes. Разница только в том, что source устанавливает начальное значение для pipes (pipes[0]), когда каждый звонок pipe подталкивает новую трубку в коллекцию.
2. Предыдущий факт дает нам информацию о d3.geo.jsonSource внутренняя структура. Он должен быть аналогичен аргументам, переданным pipe: первый аргумент - это что-то вызываемое (функция), остальные аргументы - параметры.
3. Предположим, что 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.