12

ツリーマップにやや近いが三角形のスタイルのカスタム d3 レイアウトを作成する必要があります。理解できるように、次のスクリーンショットを示します: ここに画像の説明を入力 ピラミッド レイアウト

ご覧のとおり、かなりきちんと動作し、私のニーズに合っています。コード化するために、ツリーマップ レイアウト コードに基づいてコードを作成しました。

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 に関連する問題なのかはわかりませんが、この小さな問題の解決を手伝っていただけるかどうかを知りたいです。

前もって感謝します！

4

1 に答える 1

2

d3.layout.pyramid 関数をコピーして新しいファイルに貼り付け、必要に応じて関数の名前を変更して、d3 ライブラリと競合しないようにします。すべてが非公開になる可能性が高いため、最も外側の関数のみ名前を変更する必要があります。おそらく「d3」に名前空間を付ける必要はありません。つまり、これはうまくいくはずです：

var myPyramidLayout = function () {
    ...
}
于 2013-03-19T01:25:06.527 に答える