javascript - D3 TreeMap - 文本中心、控制高度和链接箭头奇怪行为

Question

我正在用这个 fiddle 制作 D3 TreeMap :http://jsfiddle.net/q1a6o1o8/2/

我遇到了以下问题:

1. 我似乎无法将矩形节点内的文本正确居中。使用圆圈时我没有遇到问题。 “text-anchor”“middle”不起作用。我试图避免使用“x”属性居中，以便文本始终在“rect”内居中，无论其长度如何。

   <

2. 有没有一种方法可以使矩形具有响应性，以便基本上矩形的宽度或高度根据包含的文本的长度而变化？即较长的文本应在“矩形”节点内居中

3. 我已经在链接上添加了箭头图标，但在让它们出现方面我遇到了奇怪的行为。如果您在 fiddle 上四处点击，您会看到箭头在某些情况下会出现但在其他情况下不会出现？

4. 如何调整每个节点之间的上下距离(不是深度)。我问的原因是当我一直扩展图形时，叶节点似乎相互重叠。当我将 svg 容器的高度增加到 900 时，这似乎有所帮助，但其他节点在图中早些时候彼此扩展得太远。有没有办法在不增加 SVG 高度的情况下，使父节点靠得更近，但又能防止叶节点重叠？

   var height = 900; //changed from 650
   

谢谢

Answer 1

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 并导致树根据节点数自动更改大小。