0

cola.jsを使用してサンプルプログラムのようなグラフレイアウトを作っています。
このリンクの直線を曲線に変更することはできますか?d3.jsのこちらの例のように
曲線にしてみたいのですが、どの部分で曲線か直線かを指定しているのかよくわかりません。

現在は以下のようにリンクの座標を定義しています。

link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });

これを上記の例にならって、以下のように定義しても、リンクが消えてしまい、
表示されません。どうしたら良いのでしょうか?

link.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + 
        d.source.x + "," + 
        d.source.y + "A" + 
        dr + "," + dr + " 0 0,1 " + 
        d.target.x + "," + 
        d.target.y;
});

よろしくお願い致します。

1 件の回答 1

2

現在の例は、変数linkline要素になっているとおもいますが、曲線の場合はpath要素にする必要があります。

たとえば、次のように変数linkpath要素として作成されているか確認してください。

var link = svg.append('path');

const data = [{
  source: {
    x: 10, y: 10
  },
  target: {
    x: 50, y: 50
  }
}]

const svg = d3.select('svg')

const link = svg.append('path')
  .data(data)
  .attr('fill', 'transparent')
  .attr('stroke', '#000')
  .attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + 
        d.source.x + "," + 
        d.source.y + "A" + 
        dr + "," + dr + " 0 0,1 " + 
        d.target.x + "," + 
        d.target.y;
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg />

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。