我正在用这个 fiddle 制作 D3 TreeMap :http://jsfiddle.net/q1a6o1o8/2/
我遇到了以下问题:
我似乎无法将矩形节点内的文本正确居中。使用圆圈时我没有遇到问题。 “text-anchor”“middle”不起作用。我试图避免使用“x”属性居中,以便文本始终在“rect”内居中,无论其长度如何。
<有没有一种方法可以使矩形具有响应性,以便基本上矩形的宽度或高度根据包含的文本的长度而变化?即较长的文本应在“矩形”节点内居中
我已经在链接上添加了箭头图标,但在让它们出现方面我遇到了奇怪的行为。如果您在 fiddle 上四处点击,您会看到箭头在某些情况下会出现但在其他情况下不会出现?
如何调整每个节点之间的上下距离(不是深度)。我问的原因是当我一直扩展图形时,叶节点似乎相互重叠。当我将 svg 容器的高度增加到 900 时,这似乎有所帮助,但其他节点在图中早些时候彼此扩展得太远。有没有办法在不增加 SVG 高度的情况下,使父节点靠得更近,但又能防止叶节点重叠?
var height = 900; //changed from 650
谢谢
最佳答案
1: 由于 text-anchor
是一种样式,因此您必须使用以下内容:
nodeEnter.append("text").style("text-anchor", "middle")
您会注意到,这会将文本设置为在 rect
的左边缘居中。您可以通过将 text
或 rect
元素偏移 rect
宽度的一半来解决此问题。
2:这也很简单。绘制文本元素后,您希望遍历它们(each
函数),选择它们各自的 rect
(应该可以使用 d
参数), 然后将 rect
的宽度设置为计算出的宽度。
svg.selectAll("text").each(function (d){
var textWidth = this.getBBox().width;
});
3: 将 .attr("marker-end", "url(#arrowhead)")
移动到 link.enter().append("line")
(在设置 y2
之后)。
4:最简单的方法是增加树的高度,比如var tree = d3.layout.tree().size([1500, width]);
然后启用缩放和拖动(example)。理论上您可以自定义深度间距,但它可能比缩放/拖动更多工作。另一种选择是将 .nodeSize([50,return 50;}])
添加到 var tree = ...
,但这会改变所有节点的间距,而不管深度如何.请注意,设置 nodeSize
会覆盖 size
并导致树根据节点数自动更改大小。
关于javascript - D3 TreeMap - 文本中心、控制高度和链接箭头奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35932405/