d3.rebind在D3 v4中

Question

所以我在網上發現了這段代碼，它在d3圖中的節點上計算dijkstra的最短路徑算法。 問題是d3.rebind已被刪除，我還沒有找到一種方法來修復這段代碼以使其工作。 有什么建議？ 另外我知道這段代碼不是我的，這就是為什么我在理解如何更改代碼時遇到一些問題。 謝謝

d3.dijkstra = function () {
    var dijkstra = {};
    var nodes;
    var edges;
    var source;
    var dispatch = d3.dispatch("start", "tick", "step", "end");

    dijkstra.run = function (src) {
        source = src;
        var unvisited = [];

        nodes.forEach(function (d) {
            if (d != src) {
                d.distance = Infinity;
                unvisited.push(d);
                d.visited = false;
            }
        });

        var current = src;
        current.distance = 0;

        function tick() {
            current.visited = true;
            current.links.forEach(function(link) {
                var tar = link.target;
                if (!tar.visited) {
                    var dist = current.distance + link.value;
                    tar.distance = Math.min(dist, tar.distance);
                }
            });
            if (unvisited.length == 0 || current.distance == Infinity) {
                dispatch.end()
                return true;
            }
            unvisited.sort(function(a, b) {
                return b.distance - a.distance 
            });

            current = unvisited.pop()

            dispatch.tick();

            return false;
        }

        d3.timer(tick);
    };

   dijkstra.nodes = function (_) {
        if (!arguments.length)
            return nodes;
        else {
            nodes = _;
            return dijkstra;
        }
    };

   dijkstra.edges = function (_) {
        if (!arguments.length)
            return edges;
        else {
            edges = _;
            return dijkstra;
        }
    };

   dijkstra.source = function(_) {
        if (!arguments.length)
            return source;
        else {
            source = _;
            return dijkstra;
        }
    };


   dispatch.on("start.code", dijkstra.run);

   return d3.rebind(dijkstra, dispatch, "on", "end", "start", "tick");
};

Answer 1

如您所知， d3.rebind()已在D3 v4中刪除。 根據Mike Bostock （D3創造者）的說法 ：

如果您需要此類功能，可以從v3復制實現。

這是v3的源代碼 ：

// Copies a variable number of methods from source to target.
d3.rebind = function(target, source) {
  var i = 1, n = arguments.length, method;
  while (++i < n) target[method = arguments[i]] = d3_rebind(target, source, source[method]);
  return target;
};

// Method is assumed to be a standard D3 getter-setter:
// If passed with no arguments, gets the value.
// If passed with arguments, sets the value and returns the target.
function d3_rebind(target, source, method) {
  return function() {
    var value = method.apply(source, arguments);
    return value === source ? target : value;
  };
}

正如您將看到的，它的使用非常簡單。

所以，假設我們有這個代碼，運行D3 v3：

 var foo = { hello: function() { console.log("hello"); return this; }, world: function() { console.log("world"); return this; } }; var bar = {}; d3.rebind(bar, foo, "hello", "world") bar.hello().world() 

 <script src="https://d3js.org/d3.v3.min.js"></script> 

對於使用不帶D3 v3的rebind的相同代碼，您只需要復制原始函數。

就這個：

 var foo = { hello: function() { console.log("hello"); return this; }, world: function() { console.log("world"); return this; } }; var bar = {}; rebind(bar, foo, "hello", "world"); bar.hello().world() function rebind(target, source) { var i = 1, n = arguments.length, method; while (++i < n) target[method = arguments[i]] = d3_rebind(target, source, source[method]); return target; }; function d3_rebind(target, source, method) { return function() { var value = method.apply(source, arguments); return value === source ? target : value; }; }