

cola.jsを使用して[サンプルプログラム](http://marvl.infotech.monash.edu/webcola/examples/pageBoundsConstraints.html)のようなグラフレイアウトを作っています。  
このリンクの直線を曲線に変更することはできますか？d3.jsの[こちらの例](http://bl.ocks.org/d3noob/5141528)のように  
曲線にしてみたいのですが、どの部分で曲線か直線かを指定しているのかよくわかりません。

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

[code]

    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; });
    
[/code]

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

[code]

    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;
    });
    
[/code]

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


CC BY-SA 3.0
2017-10-23T05:14:10.160
38969
2018-07-20T07:06:47.653
2017-10-23T05:19:15.683
25836
25836
question
javascript d3.js
d3.jsのグラフの直線を曲線にしたい


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

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

[code]

    var link = svg.append('path');
    
[/code]

[code]

    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;
      });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <svg />
[/code]


CC BY-SA 4.0
2018-07-20T06:49:23.023
46772
2018-07-20T07:06:47.653
2018-07-20T07:06:47.653
21379
21379
38969
answer