Создание пользовательского макета d3

Мне нужно создать пользовательский макет d3, который несколько близок к treemap, но в треугольном стиле. Вот скриншот, чтобы вы могли понять: enter image description hereМакет пирамиды

Как вы можете видеть, он работает довольно аккуратно и соответствует моей потребности. Чтобы закодировать его, я основал код в коде макета treemap:

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. Ясно, что я знаю, что это не лучшая практика, но я не могу обойти внешний вид моего файла в отдельной script причине d3_layout_hierarchyRebindis, которая не видна снаружи.

Я не знаю, была ли проблема с d3- или javascript, но я хотел бы знать, можете ли вы помочь мне решить эту небольшую проблему.

Спасибо заранее!

Ответы

Ответ 1

Просто скопируйте и вставьте функцию d3.layout.pyramid в новый файл и переименуйте функции по мере необходимости, чтобы они не конфликтуют с библиотекой d3. Вероятно, все будет частным, поэтому нужно переименовать только самую внешнюю функцию. Вероятно, вам не нужно будет указывать пространство на "d3". То есть это должно работать:

var myPyramidLayout = function () {
    ...
}