Extend 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’ve managed to create a new set of svg elements:

  • React + d3js: Use React and parts of d3 or let d3 do it's own thing
  • D3 adapt force layout for tree structure with additional parent and sibling paths
  • Animate lines in a line graph with D3.js
  • D3 + Leaflet: d3.geo.path() resampling
  • Bar Chart With View Finder d3.js
  • Comparison of two network graphs
  • var markerLink = layer.selectAll(".links")
          .data(links)
          .each(pathTransform) // update existing markers
        .enter().append("line")
          .each(pathTransform)
          .attr("class", "links");
    

    Where links is an array of arrays. Each inner array has 4 values corresponding to latitude and longitude of the beginning and end of each line: x1, y1, x2 and y2 of the d3 line.

    The 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 the latitude and longitude values and returns a properly sized and positioned svg element.

    Following the example with the marker svg elements, I tried to append a line to the markerLink elements. This is where I run into trouble. I can’t figure out how to position the lines within each svg.

    Is this a good approach or is there another way to add circles, paths, lines and labels to google map overlays?

  • Make Nvd3 Pie Chart show percentages with decimals
  • Create dataset from array of numbers with d3.js
  • How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
  • Remove padding of c3 line chart
  • calculating the arc/point in d3 path
  • d3 csv data loading