如何在 D3 中将 Reingold–Tilford 树变成双面树答案

【问题标题】：How to turn Reingold–Tilford Tree into double sided tree in D3如何在 D3 中将 Reingold–Tilford 树变成双面树
【发布时间】：2015-02-23 09:34:49
【问题描述】：

我目前正在处理此示例http://bl.ocks.org/mbostock/4339184，并正在寻求有关如何将这棵树转换为双面树的建议。我使用这种树形结构的原因是我的文本/标签很长，想把它们放在一个页面中。我也尝试了径向树的选项，但长标签会与其他标签重叠。我尝试根据名为 size 的参数包装一些文本，但没有成功。我的径向树代码可在此链接http://jsfiddle.net/hv6wc7x5/ 中找到我想要使用的实际标签很长，如链接所示。我不能讨论标签，因为这是研究工作的一部分，不能公开展示。

基本上我不想在这篇文章中问两个问题。首先，有没有办法将普通的 Reingold-Tilford 树转换为双面树。

第二个问题是是否有一种方法可以根据 JSON 中给出的 size 属性来包装选定文本的文本。下面给出了我要更改的代码，但它不起作用，如果有人可以帮助我解决这个问题，那就太好了。在代码段的最后一行，我想根据我的属性大小是否等于某个值的检查来调用 wrap 函数（我的代码中的一个内部方法），但我无法做到这一点。谁能告诉我如何改进最后一行？

node.append("text")
                  .attr("dx", function(d) { return d.x < 180 ? 10 : -10; })
                  .attr("dy", ".31em")
                  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
                  .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
                  .text(function(d) { return d.name; })
                  .attr("wraper", function(d) { return d.size == "3534" ? node.call(wrap,0) : node.call(wrap,0);
});

如果以上任何一个问题都能得到解答，那就太好了，尽管我希望我的第一个问题得到解答。

【问题讨论】：

标签： javascript d3.js tree visualization data-visualization

【解决方案1】：

我不确定你所说的双面树是什么意思？你的意思是两棵树并排？如果是这样，您将不得不拆分数据。

至于第二个问题，能不能用nodes.filter。通过数据中的“大小”属性过滤它们？

【讨论】：

双树我的意思是根节点在中间，分支向左和向右分支。（我-我）喜欢这样。
您的数据就是这样排列的。如果您想自己拆分，则必须拆分数据
你能给我看一个小例子吗？如果我拆分数据，树将如何在左右方向分支？
你想要的方式：'他的根节点在中间，分支左右分支'，纯粹是你的数据是如何设置的。想要它左右分支的原因是什么？
我希望减少树的长度并增加树的宽度，这样我就可以在一张纸上以横向模式打印它。

【解决方案2】：

正如另一个答案中所建议的，最好的做法是将数据拆分为“左”和“右”树。这些树中的每一个都有一个公共节点，即“根节点”。

当渲染树时，你要做的就是保持根节点彼此重叠。

【讨论】：