创建自定义 d3 布局答案

【问题标题】：Creating a custom d3 layout创建自定义 d3 布局
【发布时间】：2012-10-28 20:35:30
【问题描述】：

我需要创建一个自定义的 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 文件，因为无法从 outisde 访问某些私有函数，在我的情况下为 d3_layout_hierarchyRebind。显然我知道这根本不是最佳做法，但我无法将我的文件外部化到单独的脚本中，因为从外部看不到 d3_layout_hierarchyRebindis。

我不知道是 d3 还是 javascript 相关的问题，但我想知道您是否可以帮我解决这个小问题。

提前致谢！

【问题讨论】：

看起来 d3.js 只是没有设计为具有外部定义的布局。您可以将您编写的布局合并到 d3.js 的自定义构建中。我认为没有其他方法可以做到这一点。
好问题和评论 - 观察到同样的问题。首先要获得 d3_identity...
正如@ZachB 指出的那样，您可以在不使用 D3 命名空间的情况下创建布局。布局只是一个可配置的函数，它接收数据并返回转换后的数据，这正是您的函数所做的。

标签： javascript layout d3.js treemap

【解决方案1】：

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

var myPyramidLayout = function () {
    ...
}

【讨论】：