d3.js（版本：3）如何确定它是径向树布局

Question

大家好！我正在尝试学习d3布局，我得到了两个问题。

正如文档tree.size([size])所提到的那样，size是一个双元素数组。假设我像这样设置一棵树：

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

现在似乎有两种情况：普通树布局或径向树布局，其中 360 的度数和 Radius 的深度。

问题1：

d3如何解释可能代表普通树或径向树的数组？

问题2：

我发现d3.layout.cluster非常接近树形布局。有谁能告诉我有什么区别？ 这个问题可能有点愚蠢。

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

Answer 1

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

  

布局大小以x和y指定，但不限于此   屏幕坐标并且可以表示任意坐标系。 （v3 documentation）。

如果我们看看Mike Bostock（v4）的这个block，我们可以看到调用特殊的投影函数来创建径向效果：

  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进行比较（也来自Mike Bostock，并在下图中捕获）：