d3.js（版本：3）怎么算出它是一个径向树型布局

大家好！我正在尝试学习d3布局，并且我在路上发现了两个问题。d3.js（版本：3）怎么算出它是一个径向树型布局

正如文件tree.size([size])提到的那样，size是一个两元素数组。说我把一棵树是这样的：

d3.layout.tree().size([360, Radius])

现在，似乎有两种情况：正常的树布局或径向树布局与程度和半径深入。

问题1：

如何D3解释其可表示正常树或径向树数组？

问题2：

我发现d3.layout.cluster非常接近树的布局。有人能告诉我有什么不同吗？这个问题也许有点愚蠢。

任何建议将不胜感激！非常感谢。

来源

2017-02-25 1Cr18Ni9

对于d3v3或d3v4，大小数组可以用于普通树或径向树。这些将始终返回正常树的每个节点的x，y值，我们必须强制这些坐标进入径向对齐以获得径向树：

布局大小在x和y中指定，但这不是限制屏幕坐标，并可能表示任意坐标系统。（v3 documentation）。

如果我们看一下这个block由迈克·博斯托克（V4），我们可以看到一个特殊的投影功能被称为形成放射状的效果：

var node = g.selectAll(".node") 
    .data(root.descendants()) 
    .enter().append("g") 
     .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) 
     .attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; });

而且该投影功能是这样的：

function project(x, y) { 
    var angle = (x - 90)/180 * Math.PI, radius = y; 
    return [radius * Math.cos(angle), radius * Math.sin(angle)]; 
}

总体而言，这给喜欢的形状：

投影函数是唯一使它成为放射状的函数。如果我们将投影函数更改为仅传递x，y数据：

function project(x, y) { 
    return [x,y]; 
}

我们得到了一个典型的树状布局。但是，所有附加的g元素都被转换为中心，宽度，高度与svg不匹配。如果我们设置这些正常含量（[0,0]翻译和宽度树的高度符合SVG，我们会得到这样的：

注意标签仍在旋转，有仍然是一个内联函数来设置它们的安排。

至于簇和树之间的差，该API documentation确实提供一些帮助：

群集布局产生树状图：即放置树的叶节点在节点 - 链路图相同的深度。

如果您在径向示例的树形图中注意到，并非所有叶子都处于相同深度，则该圆圈的半径不会均匀。看看这个block的比较（也来自麦克·博斯托克，并在下面的图片拍摄）：

来源

2017-02-25 18:29:06

d3.js（版本：3）怎么算出它是一个径向树型布局

回答

相关问题