javascript - DataMaps.js - 网络天气 map (入站和出站弧线)

Question

我正在尝试使用带有弧和圆选项的数据图来创建网络天气图。

我遇到的基本问题是网络中存在入站和出站连接，我希望能够将它们可视化为单独的实体。为了避免传入和传出重叠，我尝试做一个简单的经度和纬度偏移(每个 - .2)来“偏移”路径。我看到的是它们相互交叉。

关于我如何能够做到这一点有什么想法吗？

Current Map Image

Answer 1

我也遇到了同样的问题，请查看 https://github.com/cpmarvin/d3js_weathermap 。如果您有并行链接，那么您需要获取节点之间的链接数并进行偏移。看看https://github.com/cpmarvin/d3js

希望有帮助。

.attr("d", function(d) {
    //find middle value of the link and calculate path
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);

    var endX = (d.target.x + d.source.x) / 2;
    var endY = (d.target.y + d.source.y) / 2;

    var len = dr - ((dr/2) * Math.sqrt(3));
    endX = endX + (1 * len/dr);
    endY = endY + (-1 * len/dr);

    return "M" + d.source.x + "," + d.source.y + "L" + endX + "," + endY;
} )

这是基于:

Display an arrow head in the middle of D3 force layout link