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: enter image description here 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!

It looks like d3.js just was not designed to have externally defined layouts. You could incorporate the layout you wrote into a custom build of d3.js. I see no other way to do this. — fuzic, Mar 12 '13 at 01:34
Good question and comment- same problem observed. It starts with getting a d3_identity already... — andig, Sep 30 '13 at 13:28
As @ZachB pointed out, you can create a layout without using the D3 namespace. A layout is just a configurable function that receives data and returns transformed data, that's exactly what your function does. — Pablo Navarro, Dec 31 '13 at 12:51

score 2 · Answer 1 · answered Mar 19 '13 at 01:25

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

Creating a custom d3 layout

1 Answers1

Linked