如何在D3中将Reingold–Tilford树变成双面树
How to turn Reingold–Tilford Tree into double sided tree in D3
我目前正在处理这个例子http://bl.ocks.org/mbostock/4339184我正在寻求如何将这棵树转化为双面树的建议。我使用这种树结构的原因是我的文本/标签很长,并且希望将它们放在一个页面中。我也尝试了径向树的选项,但长标签会与其他标签重叠。我试图根据一个名为size的参数包装一些文本,但没有成功。我的径向树代码在此链接中可用http://jsfiddle.net/hv6wc7x5/我想使用的实际标签很长,如链接中所示。我不能讨论标签,因为这是研究工作的一部分,不能公开展示。
基本上我不想在这篇文章中问两个问题。首先,有没有一种方法可以将普通的Reingold–Tilford树转换为双边树。
第二个问题是,是否有一种方法可以根据JSON中给定的大小属性来包装所选文本的文本。下面给出了我想更改的代码,但它不起作用,如果有人能帮助我解决这个问题,那就太好了。在代码段的最后一行,我想根据检查我的属性大小是否等于某个值来调用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);
});
如果以上任何一个问题都能得到回答,那就太好了,尽管我很希望我的第一个问题能得到回答。
我不知道你说的双面树是什么意思?你是说两棵并排的树?如果是这样,您将不得不拆分数据。
至于第二个问题,你不能使用nodes.filter。通过你数据中的"size"属性来过滤它们吗?
正如另一个答案中所建议的,最好的做法是将数据拆分为"左"树和"右"树。这些树中的每一个都有一个公共节点,即"根节点"。
渲染树时,您所要做的"全部"就是将根节点保持在彼此的顶部。
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 如何在d3.js中返回路径的y坐标
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 使用D3.js计算带有字母间距的文本长度
- d3中堆栈函数和嵌套函数之间的差异
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- D3嵌套组作为x轴
- d3.hexbin插件-动态定义颜色域以适应数据
- HTML5FileReader输出到D3.js图表
- 如何在d3上的图形中添加放大和缩小按钮
- 在对象数组中查找多个值的d3范围
- d3中的条件转换
- D3.js生成有效的SVG,但不显示任何内容
- 如何在D3中将Reingold–Tilford树变成双面树
- 如何在D3中使节点的拖放在径向Reingold-Tilford树内工作