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

DataMaps.js - Network Weather-map (inbound and outbound arcs)

本文关键字:js- 网络 天气图 DataMaps      更新时间:2023-09-26

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

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

有什么关于我该怎么做的想法吗?

当前地图图像

我遇到了同样的问题https://github.com/cpmarvin/d3js_weathermap.如果你有并行链接,那么你需要获得链接的数量btw节点并进行偏移。看看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;
} )

这是基于:

在D3力布局链接的中间显示箭头