创建自定义d3布局

Question

我需要创建一个自定义的d3布局，它有点接近树形图但是采用三角形样式。这是一个截图，以便您可以理解： Pyramid layout

正如您所看到的，它的工作非常整洁，符合我的需要。 为了编码，我将代码基于树形图布局代码：

d3.layout.pyramid= function () {
    var hierarchy = d3.layout.hierarchy(), round = Math.round, size = [ 1, 1 ], padding = 0;

    function populate (nodes, currentHeight, currentHeightPadded, currentBase, currentSumedWeight) {
       ...
    }

    function populate_layers (layer, nodes,currentHeight,currentLength, currentSumedArea,currentSumedWeight) {
       ...
    }

    function pyramid(d) {
       var nodes = hierarchy(d), root = nodes[0];

       populate(root.children.slice(),0,0,0,0);
       return nodes;
    }  

    pyramid.padding = function(x) {
       if (!arguments.length) return padding;
       padding = x;
       return pyramid;
    };

    pyramid.size = function(x) {
       if (!arguments.length) return size;
       size = x;
       return pyramid;
    };

    return d3_layout_hierarchyRebind(pyramid, hierarchy);
};

我的问题是，为此，我必须直接编辑d3.v2.js文件，因为在我的案例d3_layout_hierarchyRebind中无法从outisde访问某些私有函数。 显然，我知道这不是最好的做法，但我无法在单独的脚本中将我的文件外部化，因为从外面看不到d3_layout_hierarchyRebindis。

我不知道这是否与d3或javascript有关，但我想知道你是否可以帮助我解决这个小问题。

提前感谢！

Answer 1

只需将d3.layout.pyramid函数复制并粘贴到新文件中，并根据需要重命名函数，使其不与d3库冲突。可能一切都是私有的，所以只需要重命名最外面的功能。您可能不必将其命名为“d3”。也就是说，这应该有效：

var myPyramidLayout = function () {
    ...
}