javascript - D3 リンクの外観の変更

Question

データをツリーとして視覚化したいと考えていますが、デフォルトのリンクの外観もカスタマイズしたいと考えています。デフォルトの外観が示されていますが、 Rational Software Architectのリンクのように見えるリンクを作成したいと考えています。出来ますか？

Answer 1

リンクは SVG パス要素です。CSSを使用してスタイルを設定し、色や幅などを変更できます。矢印の頭にはSVG マーカーを使用できます。ラベルを追加するには、追加の SVG テキスト要素を追加する必要があります。たとえば、UML カーディナリティの SVG テキスト要素を作成するデータとして、ツリーリンクを含む新しい選択を追加できます。

Answer 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);
        }
    }

関数 Math.sign は私自身の実装です