3

我正在尝试修改此Google Maps + D3 示例 以包含点之间的线。我采用的方法是为每一行添加新的 svg 元素。

我设法创建了一组新的 svg 元素：

var markerLink = layer.selectAll(".links")
      .data(links)
      .each(pathTransform) // update existing markers
    .enter().append("line")
      .each(pathTransform)
      .attr("class", "links");

其中 links 是一个数组数组。每个内部数组有4个值对应每行的开始和结束的纬度和经度：d3行的x1、y1、x2和y2。

路径转换函数：

function pathTransform(d) {
    var t, b, l, r, w, h;
    var d1 = new google.maps.LatLng(d[1], d[0]);
    var d2 = new google.maps.LatLng(d[3], d[2]);
    d1 = projection.fromLatLngToDivPixel(d1);
    d2 = projection.fromLatLngToDivPixel(d2);
    if ( d1.y < d2.y ) {
      t = d1.y - 25;
      b = d2.y + 25;
    } else {
      t = d2.y - 25;
      b = d1.y + 25;
    }
    if ( d1.x < d2.x ) {
      l = d1.x - 25;
      r = d2.x + 25;
    } else {
      l = d2.x - 25;
      r = d1.x + 25; 
    }

    return d3.select(this)
        .style("left", l + "px")
        .style("top", t + "px")
        .style("width", (r - l) + "px")
        .style("height", (b - t) + "px");
  }

获取纬度和经度值并返回适当大小和定位的 svg 元素。

按照带有标记 svg 元素的示例，我尝试将一行附加到 markerLink 元素。这就是我遇到麻烦的地方。我不知道如何在每个 svg 中定位线条。

这是一个好方法还是有另一种方法可以将圆圈、路径、线条和标签添加到谷歌地图叠加层？

4

0 回答 0