Question

我目前正在研究这个例子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);
});

如果上述任何一个问题得到解答会很好，尽管我很乐意回答我的第一个问题。

Answer 1

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

至于第二个问题，你不能使用nodes.filter。通过您的尺寸＆＃39;过滤它们。您的数据属性？

Answer 2

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

当渲染树“全部”时，您需要做的是将根节点保持在彼此之上。

如何在D3中将Reingold-Tilford树变成双面树

2 个答案: