javascript - Google Maps + D3の例を拡張して、パスまたは線を追加します

Question

このGoogleマップ+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です。

pathTransform関数：

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内に線を配置する方法がわかりません。

これは良いアプローチですか、それともGoogleマップのオーバーレイに円、パス、線、ラベルを追加する別の方法がありますか？