DataMaps.js - 网络天气图（入站和出站弧）

【问题标题】：DataMaps.js - Network Weather-map (inbound and outbound arcs)DataMaps.js - 网络天气图（入站和出站弧）
【发布时间】：2016-04-29 15:09:27
【问题描述】：

我正在尝试使用 Datamaps 和圆弧选项来创建网络天气图。

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

关于我如何能够做到这一点的任何想法？

Current Map Image

【问题讨论】：

如果您创建了第二个电弧发生器（如果正在发生这种情况），并且使一个大于另一个会怎样？这样它们就不会重叠，但仍然会有些不同。
你可以在圆弧上使用颜色过渡，即当圆弧熄灭时，你使用绿色，当圆弧进来时，你将颜色转换为红色或其他东西。

标签： javascript d3.js svg datamaps

【解决方案1】：

我有同样的问题，看看https://github.com/cpmarvin/d3js_weathermap。如果您有并行链接，那么您需要获取链接 btw 节点的 nr 并进行偏移。看看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

【讨论】：

请不要提供仅链接的答案：如果链接断开，答案将变得无关紧要。相反，将最重要的部分直接放在您的帖子中，并确保结果是答案，而不是评论。