javascript - d3 力有向グラフで曲線を使用

Question

d3 force レイアウトを介していくつかのデータを視覚化したいと考えています。

ただし、ノードを結ぶリンクは直線です。ただし、データには 2 つのノードを接続する複数のエッジがある場合があります。したがって、強制レイアウトの直線は、それらすべてを正しく表示することはできません。行ではなくリンクにパスを追加しようとしました。しかし、うまくいきませんでした。それが間違った方法で使用していたのか、強制レイアウトがパスをリンクとして受け入れないためなのかはわかりません。

Answer 1

svg を使用: 行の代わりにパス

var viz = d3.select("body")
    .insert("svg:svg", "h2")
    .attr("width", "100%")
    .attr("height", "100%")

. . . . . . . .

    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.selectAll("path").data(force.links()).enter()
                .append("svg:path").attr("source", function(d) {
                    return d.source.id;
                }).attr("target", function(d) {
                    return d.target.id;
                }).attr("class", "link").attr('marker-end', 'url(#head)');

ここで、ソースとターゲットはノードであり、「 svg:path」の「 d」属性で指定された曲線であり、 marker-end属性は矢頭用です