Extend the Google Maps + D3 example to add a path or line

I am trying to modify this Google Maps + D3 example to include lines between points. The approach I took was to add new svg elements for each line.

I managed to create a new set of svg elements:

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

Where links are an array of arrays. Each internal array has 4 values ​​corresponding to the latitude and longitude of the beginning and end of each row: x1, y1, x2 and y2 of row d3.

PathTransform Function:

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");
  }

takes latitude and longitude values ​​and returns an element with the appropriate size and svg position.

Following the example of svg marker elements, I tried to add a line to markerLink elements. Here I ran into trouble. I cannot figure out how to arrange the lines in each svg.

, , Google?