创建自定义 d3 布局

2024-01-17

I need to create a custom d3 layout that is somewhat close to a treemap but in a triangular style. Here's a screenshot so that you can understand: enter image description here Pyramid layout http://imageshack.us/photo/my-images/407/captureuec.jpg/

正如您所看到的,它工作得非常简洁并且符合我的需要。 为了对其进行编码,我将代码基于树形图布局代码:

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。 显然,我知道这根本不是最佳实践,但我无法设法在单独的脚本中外部化我的文件,因为d3_layout_hierarchyRebindis从外面看不到。

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

提前致谢!


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

var myPyramidLayout = function () {
    ...
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建自定义 d3 布局 的相关文章

随机推荐