Use curve in d3 force directed graph

Question

I want to visualize some data via d3 force layout.

However, the links connecting nodes are straight lines. But the data may have multiple edges connecting two nodes. So straight lines in force layout cannot correctly display all of them. I tried to append path to links rather than line. But it didn't work. I don't know whether that was because I was using it in the wrong way or force layout doesn't accept path as links.

Answer 1

Use svg : path insted of line

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)');

here source and target are the nodes , curve specified in the 'd' attribute of 'svg:path' and marker-end attribute is for arrow head