javascript - D3.js force layout - edge label placementrotation - Stack Overflow

admin管理员组

文章数量:1277588

I'm pretty new with D3.js, and I've been playing around with force layout. One of the things I tried was placing labels on links.

One way of doing it is by appending svg:text and manually calculating translate & rotate, which works fine with straight lines. But, in case when link is a svg:path (e.g. arc), this doesn't work as expected. In these cases, svg:textPath is suggested solution.

In this demo, you can see a simple implementation of adding labels to links through svg:textPath. The only problem with it is that, in case when source is positioned to the right of target, text is rendered in opposite direction (from our point of view, it's still correct from path's perspective). My question is, how to deal with this?

The only "solution" I came up with is, manually swapping source and target in case described above. Here, you can see that it almost works.

In state when the swap happens, you can also see arc flipping to other side, which doesn't look right. :(

I'm pretty new with D3.js, and I've been playing around with force layout. One of the things I tried was placing labels on links.

One way of doing it is by appending svg:text and manually calculating translate & rotate, which works fine with straight lines. But, in case when link is a svg:path (e.g. arc), this doesn't work as expected. In these cases, svg:textPath is suggested solution.

In this demo, you can see a simple implementation of adding labels to links through svg:textPath. The only problem with it is that, in case when source is positioned to the right of target, text is rendered in opposite direction (from our point of view, it's still correct from path's perspective). My question is, how to deal with this?

The only "solution" I came up with is, manually swapping source and target in case described above. Here, you can see that it almost works.

In state when the swap happens, you can also see arc flipping to other side, which doesn't look right. :(

• javascript
• d3.js
• label
• force-layout

Share Improve this question Follow edited Jan 19, 2014 at 10:09 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Aug 19, 2013 at 14:15 Matija FolnovicMatija Folnovic 94622 gold badges1010 silver badges2323 bronze badges 1

• You can't specify a text direction for textPath -- the text always follows the direction of the path. So the solution you have is the only feasible one. – Lars Kotthoff Commented Aug 19, 2013 at 14:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

@LarsKotthoff is correct that the textPath has to follow the direction of the path. In this case, the direction of the path defines not only the arc direction, but the attachment of the arrow marker on the end - this makes it tricky to swap directions on the fly, as you have to move the marker too.

The simpler solution (though maybe not the best if you have a large number of links) is to "shadow" the real link path with an invisible path used just for text:

var link = svg.append("svg:g").selectAll("g.link")
    .data(force.links())
  .enter().append('g')
    .attr('class', 'link');

var linkPath = link.append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

var textPath = link.append("svg:path")
    .attr("id", function(d) { return d.source.index + "_" + d.target.index; })
    .attr("class", "textpath");

Now you have a separate path you can manipulate properly. As you noticed, there are two issues - you have to change the path direction, and you have to change the arc direction. It looks like you can do this in the path mand string by swapping the sweep-flag value (see docs), so instead of Arx,ry 0 0,1 you have Arx,ry 0 0,0. You can reduce some code duplication by having one function to create path strings:

function arcPath(leftHand, d) {
    var start = leftHand ? d.source : d.target,
        end = leftHand ? d.target : d.source,
        dx = end.x - start.x,
        dy = end.y - start.y,
        dr = Math.sqrt(dx * dx + dy * dy),
        sweep = leftHand ? 0 : 1;
    return "M" + start.x + "," + start.y + "A" + dr + "," + dr +
        " 0 0," + sweep + " " + end.x + "," + end.y;
}

Then you can update the link path and the text path separately:

linkPath.attr("d", function(d) {
    return arcPath(false, d);
});

textPath.attr("d", function(d) {
    return arcPath(d.source.x < d.target.x, d);
});

See working code: http://jsfiddle/nrabinowitz/VYaGg/2/

本文标签： javascriptD3js force layoutedge label placementrotationStack Overflow