Question

我在下面找到了一棵很棒的树，几乎满足了我的需求。但是，我想纵向扩展树。任何人都可以给我有任何想法如何制作它或任何参考网站。任何帮助都将是赞赏。

http://mbostock.github.com/d3/talk/20111018/tree.html

Answer 1

一般来说，旋转是一个简单的数学过程。

如果该点的原始坐标为{x,y}：

{-y,x} = rotated 90° (anti-clockwise)
{y,-x} = rotated -90° (clockwise)
{-x,y} = mirrored along y-axis
{x,-y} = mirroded along x-axis
{-x,-y} = mirroded along both

这些开关应该在所有路径和坐标计算中完成。我认为这是一份很好的工作。

是否可以将整个模式包含在单个DIV中？然后，您可以尝试使用CSS3-transform旋转此DIV。

Answer 2

您正在查看的示例树实际上已从默认值旋转，因此它从左到右。这就是为什么所有＆＃39;翻译＆＃39;语句，x和y坐标从通常的位置交换。

要将此示例返回到从上到下的方向，请执行以下两项操作：

1）对于节点：在每个翻译语句中交换x和y坐标：

.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

应改为

.attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })

和其他所有＆＃34;翻译＆＃34; s。

2）对于链接：删除＆＃39; .projection＆＃39;来自

的方法

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

所以它只是说

var diagonal = d3.svg.diagonal();

如何渲染d3.layout.tree以使其向下传播（root在顶部）

2 个答案: