更改 D3 链接的外观答案

【问题标题】：Changing the appearance of D3 links更改 D3 链接的外观
【发布时间】：2012-07-02 05:22:53
【问题描述】：

我想将数据可视化为一棵树，但我也想自定义默认链接外观。 There 显示默认外观，但我想创建看起来像 Rational Software Architect 链接的链接。有可能吗？

【问题讨论】：

标签： javascript tree data-visualization d3.js

【解决方案1】：

链接是 SVG 路径元素。您可以使用CSS 设置它们的样式以更改颜色、宽度等。对于箭头，您可以使用SVG Markers。要添加标签，您需要添加额外的 SVG 文本元素。例如，您可以添加一个带有树 links 的新选择，作为为 UML 基数创建 SVG 文本元素的数据。

【讨论】：

【解决方案2】：

我已经编写了自己的路径处理程序。下面是示例代码：

function elbow(d) {
        var radius = 10;

        var xOffsetSign = Math.sign(d.source.x - d.target.x);
        var yOffsetSign = Math.sign(d.source.y - d.target.y);

        if (xOffsetSign != 0) {
            var ellipseXDirection = (xOffsetSign * yOffsetSign) > 0 ? 1 : 0;

            return "M" + d.source.x + "," + d.source.y
                + " H" + (d.target.x + xOffsetSign * radius)
                + " A" + radius + "," + radius + " 0 0," + ellipseXDirection + " " + d.target.x + "," + (d.source.y - yOffsetSign * radius)
                + " V" + d.target.y
                + (d.target.children ? "" : "h" + margin.right);
        } else {
            return "M" + d.source.x + "," + d.source.y
                + " H" + d.target.x + " V" + d.target.y
                + (d.target.children ? "" : "h" + margin.right);
        }
    }

Function Math.sign 是我自己的实现

【讨论】：