CODEWITHSUNDEEP
javascriptsvgd3.jsforce-layout
Guoxing Li
Guoxing Li

Reputation: 189

Use curve in d3 force directed graph

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.

Upvotes: 3

Views: 2887

Answers (1)

Rahul G Nair
Rahul G Nair

Reputation: 1376

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

Upvotes: 3

Related Questions