D3.js强制布局 - 边标签放置/旋转 [英] D3.js force layout - edge label placement/rotation

问题描述

我很新的D3.js，我一直在玩力布局。

其中一个方法是添加 svg：text 并手动计算 translate & rotate ，对直线运行正常。但是，如果链接是 svg：path （例如arc），这不会按预期工作。在这些情况下， svg：textPath 是建议的解决方案。

在），因此取代 Arx，ry 0 0,1 $ c> Arx，ry 0 0,0 。您可以通过一个函数来创建路径字符串来减少一些代码重复：

  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; 
返回M+ start.x +，+ start.y +A+ dr +，+ dr + 
0 0，+ sweep + x +，+ end.y; 
} 
  

然后您可以分别更新链接路径和文本路径：

  linkPath.attr（d，function（d）{
 return arcPath（false，d）; 
 }）; 
 
 textPath.attr（d，function（d）{
 return arcPath（d.source.x< d.target.x，d）; 
}） ; 
  

查看工作代码： http://jsfiddle.net/nrabinowitz/VYaGg/2/

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. :(

解决方案

@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 command 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.net/nrabinowitz/VYaGg/2/

这篇关于D3.js强制布局 - 边标签放置/旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！