Question

作为后续问题D3.js change width of container after it is drawn，我创建了适合文本长度的矩形，我想从底部链接这些矩形。但是在绘制链接时，我一直无法获得矩形的宽度。这是js代码：

var rectW = 140, rectH = 40;

// Declare the nodes.
var node = draw.selectAll('g.node')
               .data(nodes, function(d) { return d.id; });

// Enter the nodes.
var nodeLabel = node.enter().append('g')
                    .attr('transform', function(d) { return 'translate(' + source.x0 + ',' + source.y0 + ')'; });

var nodeRect = nodeLabel.append('rect')
                        .attr('width', rectW)
                        .attr('height', rectH);

var nodeText = nodeLabel.append('text')
                        .attr('x', rectW / 2)
                        .attr('y', rectH / 2)
                        .text(function (d) { return d.name; });
// This arranges the width of the rectangles
nodeRect.attr("width", function() {
    return this.nextSibling.getComputedTextLength() + 20;
})
// This repositions texts to be at the center of the rectangle
nodeText.attr('x', function() {
    return (this.getComputedTextLength() + 20) /2;
})

下一步，我想链接nodeRects。链接左上角很难看，所以我做了一些调整：

link.attr('d', function (d) {
            var sourceX = d.source.x + 0.5*d.source.getComputedTextlength() + 10,
                sourceY = (d.source.y > d.target.y)? d.source.y: (d.source.y + rectH),
                targetX = d.target.x + 0.5*d.target.getComputedTextlength() +10,
                targetY = (d.source.y >= d.target.y)? (d.target.y + rectH) : d.target.y;

它返回错误。有没有一种方法可以访问目标rect和源rect的textlength或width？

Answer 1

我自己找到了答案。 d.source.width无效，因为未定义。更改

nodeRect.attr("width", function() {
    return this.nextSibling.getComputedTextLength() + 20;
})

到

nodeRect.attr("width", function(d) {
    d.width = this.nextSibling.getComputedTextLength() + 20;
    return d.width;
})

然后使用d.source.width效果很好。

D3.js链接两个适合文本大小的矩形

1 个答案: