D3.js 使用d3js在google地图上的相同节点之间创建多个链接_D3.js

D3.js 使用d3js在google地图上的相同节点之间创建多个链接

d3.js

D3.js 使用d3js在google地图上的相同节点之间创建多个链接,d3.js,D3.js,我尝试使用d3js在谷歌地图上的相同节点之间创建多个链接。但它显示出单一的联系在地图下方，我尝试在节点0和节点1之间创建两个链接。但在地图上这些节点之间只有一个链接代码： html，身体， #地图{ 宽度：100%；身高：100%；保证金：0；填充：0； } .链接{ 冲程：#ccc；笔划宽度：1.5px； } .车站， .电台svg{ 位置：绝对位置； } .电台svg{ 宽度：1200px；高度：600px；右边填充：100px；字体：12px无衬线； } .车站圈

我尝试使用d3js在谷歌地图上的相同节点之间创建多个链接。但它显示出单一的联系

在地图下方，我尝试在节点0和节点1之间创建两个链接。但在地图上这些节点之间只有一个链接

代码：


html，
身体，
#地图{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.链接{
冲程：#ccc；
笔划宽度：1.5px；
}
.车站，
.电台svg{
位置：绝对位置；
}
.电台svg{
宽度：1200px；
高度：600px；
右边填充：100px；
字体：12px无衬线；
}
.车站圈{
填充物：棕色；
笔画：黑色；
笔划宽度：1.5px；
}
//创建谷歌地图…
var map=new google.maps.map（d3.select（“#map”）.node（）{
缩放：12，
中心：新google.maps.LatLng（51.5195，-0.1269），
mapTypeId:google.maps.mapTypeId.TERRAIN
});
风险值数据={
“节点”：[{
“姓名”：“A”，
“长”：0.0000，
“lat”：51.4800
}, {
“名称”：“B”，
“长”：-0.1684，
“lat”：51.4875
}, {
“姓名”：“C”，
“长”：-0.2043，
“lat”：51.5096
}, {
“名称”：“D”，
“长”：-0.1269，
“lat”：51.5295
}],
“链接”：[{
“来源”：0，
“目标”：1
}, {
“来源”：0，
“目标”：1
},{
“来源”：0，
“目标”：2
}, {
“来源”：0，
“目标”：3
}, {
“来源”：2，
“目标”：3
}]
}
var overlay=new google.maps.OverlayView（）；
overlay.onAdd=函数（）{
var layer=d3.select（this.getPanes（）.overlayer.append（“div”）
.attr（“类”、“站”）；
overlay.draw=函数（）{
layer.select（'svg'）.remove（）；
var projection=this.getProjection（），
填充=10；
var svg=layer.append（“svg”）
.attr（'width'，1200）
.attr（'height'，600）
var node=svg.selectAll（“.stations”）
.data（data.nodes）
.enter（）.append（“g”）
.每个（转换）
.attr（“类”、“节点”）；
var link=svg.selectAll（“.link”）
.数据（数据链接）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.每个（拉杆）；
node.append（“圆”）
.attr（“r”，4.5）；
node.append（“文本”）
.attr（“x”，7）
.attr（“y”，0）
.attr（“dy”，“.31em”）
.文本（功能（d）{
返回d.name；
});
拉托波斯函数（d）{
var p=新的google.maps.LatLng（d.lat，d.long）；
p=投影。从LatlngToDivPixel（p）；
p、 x=p.x-填充；
p、 y=p.y-填充；
返回p；
}
函数变换（d）{
var p=拉特朗托普斯（d）；
返回d3。选择（此）
.attr（“转换”、“转换”（+p.x+）、“+p.y+”）；
}
功能拉杆（d）{
var p1=latLongToPos（data.nodes[d.source]），
p2=latLongToPos（data.nodes[d.target]）；
d3.选择（本）
.attr（'x1'，p1.x）
.attr（'y1'，p1.y）
.attr（'x2'，p2.x）
.attr（'y2'，p2.y）
.style（'填充'，'无'）
.style（'stroke'，'steelblue'）；
}
};
};
覆盖.setMap（map）；

快速浏览一下，您可能会看到两个链接，它们正好位于彼此的顶部，因为生成这些链接的代码完全相同……完全相同。如何显示两个链接？快速浏览一下，您可能会看到两个链接，它们彼此重叠，因为生成这些链接的代码完全相同…完全相同。如何显示两个链接？

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<html>

<head>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>

  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .link {
      stroke: #ccc;
      stroke-width: 1.5px;
    }

    .stations,
    .stations svg {
      position: absolute;
    }

    .stations svg {
      width: 1200px;
      height: 600px;
      padding-right: 100px;
      font: 12px sans-serif;
    }

    .stations circle {
      fill: brown;
      stroke: black;
      stroke-width: 1.5px;
    }
  </style>

</head>

<body>
  <div id="map" style="width: 1200px; height: 600px;"></div>
  <script type="text/javascript">
    // Create the Google Map…
    var map = new google.maps.Map(d3.select("#map").node(), {
      zoom: 12,
      center: new google.maps.LatLng(51.5195, -0.1269),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });



    var data = {
      "nodes": [{
        "name": "A",
        "long": 0.0000,
        "lat": 51.4800
      }, {
        "name": "B",
        "long": -0.1684,
        "lat": 51.4875
      }, {
        "name": "C",
        "long": -0.2043,
        "lat": 51.5096
      }, {
        "name": "D",
        "long": -0.1269,
        "lat": 51.5295
      }],
      "links": [{
        "source": 0,
        "target": 1
      }, {
        "source": 0,
        "target": 1
      },{
        "source": 0,
        "target": 2
      }, {
        "source": 0,
        "target": 3
      }, {
        "source": 2,
        "target": 3
      }]
    }

    var overlay = new google.maps.OverlayView();

    overlay.onAdd = function() {
      var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");

      overlay.draw = function() {

        layer.select('svg').remove();

        var projection = this.getProjection(),
          padding = 10;

        var svg = layer.append("svg")
          .attr('width', 1200)
          .attr('height', 600)

        var node = svg.selectAll(".stations")
          .data(data.nodes)
          .enter().append("g")
          .each(transform)
          .attr("class", "node");

        var link = svg.selectAll(".link")
          .data(data.links)
          .enter().append("line")
          .attr("class", "link")
          .each(drawlink);

        node.append("circle")
          .attr("r", 4.5);

        node.append("text")
          .attr("x", 7)
          .attr("y", 0)
          .attr("dy", ".31em")
          .text(function(d) {
            return d.name;
          });

        function latLongToPos(d) {
          var p = new google.maps.LatLng(d.lat, d.long);
          p = projection.fromLatLngToDivPixel(p);
          p.x = p.x - padding;
          p.y = p.y - padding;
          return p;
        }

        function transform(d) {
          var p = latLongToPos(d);
          return d3.select(this)
            .attr("transform", "translate(" + p.x + "," + p.y + ")");
        }

        function drawlink(d) {
          var p1 = latLongToPos(data.nodes[d.source]),
            p2 = latLongToPos(data.nodes[d.target]);
          d3.select(this)
            .attr('x1', p1.x)
            .attr('y1', p1.y)
            .attr('x2', p2.x)
            .attr('y2', p2.y)
            .style('fill', 'none')
            .style('stroke', 'steelblue');
        }
      };
    };

    overlay.setMap(map);

  </script>
</body>

</html>