Creating a custom d3 layout

Question

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!

Answer 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 () {
    ...
}