javascript - 将链接附加到 D3 树布局中矩形的一侧

Question

我正在尝试更改每个路径，以便它们从每个矩形的右侧开始并连接到左侧。目前，它们似乎“穿过”矩形，并在矩形内部的某个位置有一个起点/终点，而不是补偿矩形的大小。

我尝试过操纵此代码:

        var diagonal = d3.svg.diagonal()
        .source(function (d) { return { "x": d.source.y, "y": d.source.x }; })
        .target(function (d) { return { "x": d.target.y - 10, "y": d.target.x }; })
        .projection(function (d) { return [d.y + 0, d.x + 0];
      });

但这只会以灾难告终，但我相信答案就在那里。

这是脚本的 JSFiddle http://jsfiddle.net/ra26wnbb/ .

更新我查看过D3 tree square node not in desired position但我不确定它是否适用于我的文本换行。

Answer 1

首先，在 wrap() 内部的工作完成后，您需要将结果高度存储在文本的基准上:d.height = 19 * (lineNumber + 1) ;。这样，无论需要什么，都可以使用高度。例如，您可以使用它从 wrap() 外部设置 rect 高度，而不是 parentNode.children[0] 事物，这是更好的关注点分离。无论如何，这就是 wrap() 最终的结果:

    function wrap(text, width) {
        text.each(function (d) { // DIFF add param d
            var text = d3.select(this),
              // DIFF: use datum to get name, instead of element text
              words = d.name.split(/\s+/).reverse(), 
              word,
              line = [],
              lineNumber = 0,
              lineHeight = 1.1, // ems
              y = text.attr("y"),
              dy = parseFloat(text.attr("dy")),
              tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
            while (word = words.pop()) {
                line.push(word);
                tspan.text(line.join(" "));
                if (tspan.node().getComputedTextLength() > width) {
                    line.pop();
                    tspan.text(line.join(" "));
                    line = [word];
                    tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
                }
            }

            // DIFF: store the height via the datum, d
            d.height = 19 * (lineNumber + 1);
            d3.select(this.parentNode.children[0]).attr('height', 19 * (lineNumber + 1));

        });
    }
});

现在您已经有了d.height，您可以使用它来计算对 Angular 线端点的必要偏移。

    // calculate source and target offsets
    // d.height gets set by the wrap() function
    var diagonal = d3.svg.diagonal()
        .source(function (d) {
            return {
                "x": d.source.x + d.source.height / 2,
                "y": d.source.y + 150
            };
        })
        .target(function (d) {
            return {
                "x": d.target.x + d.target.height / 2,
                "y": d.target.y
            };
        })
        .projection(function (d) { return [d.y + 0, d.x + 0];
      });

参见modified fiddle