扩展 Google 地图 + D3 示例以添加路径或线路

我正在尝试修改这个Google 地图 + D3 示例 http://bl.ocks.org/1125458包括点之间的线。我采取的方法是为每行添加新的 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 中定位线条。

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