Creating a custom d3 layout

帅比萌擦擦* 提交于 2019-12-04 10:26:36

问题


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:

Pyramid layout

As you can see, it works pretty neat and fits my need. To code it, i've based the code on the treemap layout code:

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

My problem is, to do so, I've had to directly edit the d3.v2.js file, because some private functions are not accessible from outisde, in my case d3_layout_hierarchyRebind. Clearly I know it´s not the best practice at all but I can't manage to externalize my file in a separate script cause d3_layout_hierarchyRebindis not visible from the outside.

I don't know if it's a d3- or javascript-related issue but I'd like to know if you could help me solve this little problem.

Thank's in advance!


回答1:


Just copy and paste the d3.layout.pyramid function into a new file and rename functions as necessary so it doesn't conflict with the d3 library. Likely everything will be private so only the outermost function will need to be renamed. You probably won't have to namespace it to "d3". That is to say, this should work:

var myPyramidLayout = function () {
    ...
}


来源:https://stackoverflow.com/questions/13292573/creating-a-custom-d3-layout

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!