D3树图 - 文本中心，控制高度和链接箭头奇数行为 [英] D3 Tree Graph - Text Center, Controlling Height, and Link Arrow Odd Behavior
问题描述
我正在使用这个小提琴的D3树形图： http://jsfiddle.net/q1a6o1o8/2 /
I am working on a D3 Tree Graph with this fiddle: http://jsfiddle.net/q1a6o1o8/2/
我遇到以下问题：
-
我似乎无法正确地居中矩形节点内的文本。我在使用圈子时没有问题。 text-anchormiddle不工作，我试图避免使用x属性居中，以便文本总是在rect的中心，而不管其长度。
I can't seem to properly center the text inside the rectangle nodes. I haven't had a problem when using circles. "text-anchor" "middle' isn't working. I'm trying to avoid using the "x" attribute to center so that the text is always centered inside the "rect" regardless of its length.
有一种使矩形响应的方法，以便基本上矩形的宽度或高度基于包括的文本的长度而改变，即更长的文本应该保持在 rect节点
Is there a way to make the rectangles responsive so that basically the width or height of the rectangle changes based on the length of the text included? i.e. longer text should stay centered inside the "rect" node
我已经在链接上添加了箭头图标，但是我遇到了让他们出现的怪异的行为。
I've added Arrow icons on the links but I am getting weird behavior in regards to having them appear. If you click around on the fiddle you'll see the arrows will appear in some cases but not appear in others?
如何调整每个节点上下之间的距离（不是深度）。我问的是当我将图一直扩展时，叶节点似乎彼此重叠。当我将svg容器的高度增加到900似乎有帮助，但其他节点扩展太远是否有一种方法可以保持父节点更靠近在一起，但保持叶节点不重叠，而不增加SVG高度？
How can I adjust the distance between each node up and down (not depth). Reason I ask is when I expand the graph all the way out, the leaf nodes seem to be overlapping each other. When I increase the height of the svg container to 900 that seems to help but the other nodes are expanded too far away from each other earlier in the graph. Is there a way to keep the parent nodes closer together but keep the leaf nodes from overlapping without increasing the SVG height?
var height = 900; //changed from 650
>
推荐答案
1：由于 text-anchor 是一种样式，
1: Since text-anchor is a style, you have to use the following:
nodeEnter.append("text").style("text-anchor", "middle")
您会注意到这会将文本设置为以 rect 。您可以通过将 text 或 rect 元素的宽度偏移 rect 。
You'll notice that this will set the text to be centered on the left edge of the rect. You can fix this by offsetting either the text or the rect element by half the width of the rect.
2：这也很简单。在绘制文本元素之后，您需要运行它们（每个函数），选择它们各自的 rect 可以使用 d 参数），然后将 rect 的宽度设置为计算宽度。
2: This too is fairly simple. After drawing the text elements you would want to run through them (each function), select their respective rect (should be possible using the d parameter), and then set the width of the rect to be the calculated width.
svg.selectAll("text").each(function (d){
var textWidth = this.getBBox().width;
});
3：移动 .attr（marker-end，url #arrowhead））到 link.enter（）。append（line） > y2 ）。
3: Move .attr("marker-end", "url(#arrowhead)") to the end of link.enter().append("line") (after you set y2).
4：最简单的方法是增加树的高度，例如 var tree = d3 .layout.tree（）。size（[1500，width]）; ，然后启用缩放和拖动（ example ）。你可以在理论上定制深度间距，但它可能比放大/拖动更多的工作。另一个选择是将 .nodeSize（[50，return 50;}]）添加到 var tree = ... ，但这会改变所有节点的间距，而不管深度如何。请注意，设置 nodeSize 会覆盖 size ，并使树根据节点数自动更改大小。
4: The easiest way is to increase the tree height, such as var tree = d3.layout.tree().size([1500, width]); and then enable zooming and dragging (example). You could theoretically customize the depth spacing, but it would likely be more work than zoom/drag. Another option is to add .nodeSize([50,return 50;}]) to var tree = ..., but this changes the spacing for all nodes regardless of depth. Note that setting nodeSize overrides size and causes the tree to automatically change size based on the number of nodes.
这篇关于D3树图 - 文本中心，控制高度和链接箭头奇数行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
