创建自定义d3布局 [英] Creating a custom d3 layout

问题描述

我需要创建一个自定义的d3布局，它稍微接近一个树形图，但是是三角形的。这里是一个屏幕截图，以便您可以理解：

金字塔布局

正如你可以看到，它的工作相当整洁，符合我的需要。
为了编码，我将基于treemap布局代码的代码：

  d3.layout.pyramid = function（）{
 var hierarchy = d3.layout.hierarchy（），round = Math.round，size = [1,1]，padding = 0; 
 
函数populate（nodes，currentHeight，currentHeightPadded，currentBase，currentSumedWeight）{
 ... 
} 
 
函数populate_layers（layer，nodes，currentHeight ，currentLength，currentSumedArea，currentSumedWeight）{
 ... 
} 
 
函数pyramid（d）{
 var nodes = hierarchy 0]; 
 
 populate（root.children.slice（），0,0,0,0）; 
返回节点; 
} 
 
 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 。
显然，我知道这不是最好的做法，但我无法管理外部化我的文件在一个单独的脚本原因 d3_layout_hierarchyRebindis 从外部不可见。

我不知道这是一个d3或javascript相关的问题，但我想知道如果你能帮我解决这个小问题。 p>

提前谢谢！

解决方案

只需复制并粘贴d3.layout .pyramid函数转换为新文件，并根据需要重命名函数，以使其不与d3库冲突。可能一切都将是私有的，所以只有最外层的函数需要重命名。你可能不需要将其命名空间为d3。也就是说，这应该工作：

  var myPyramidLayout = function（）{
 ... 
} 
  

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!

解决方案

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

这篇关于创建自定义d3布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！