我需要创建一个自定义的 d3 布局,它有点接近树状图,但采用三 Angular 形样式。这是一个屏幕截图,以便您可以理解: Pyramid layout
如您所见,它工作起来非常简洁,符合我的需要。 为了对其进行编码,我将代码基于 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
文件,因为一些私有(private)函数无法从外部访问,在我的例子中是 d3_layout_hierarchyRebind
。
很明显,我知道这根本不是最佳做法,但我无法在单独的脚本中将我的文件外部化,因为 d3_layout_hierarchyRebindis
从外部不可见。
我不知道这是 d3 还是 javascript 相关的问题,但我想知道您是否可以帮我解决这个小问题。
提前致谢!
最佳答案
只需将 d3.layout.pyramid 函数复制并粘贴到一个新文件中,并根据需要重命名函数,这样它就不会与 d3 库冲突。可能一切都是私有(private)的,所以只有最外层的函数需要重命名。您可能不必将其命名为“d3”。也就是说,这应该有效:
var myPyramidLayout = function () {
...
}
关于javascript - 创建自定义 d3 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13292573/