Extension de Google Maps + exemple D3 pour ajouter un chemin ou une ligne

J'essaie de modifier cet exemple de Google Maps + D3 pour inclure les lignes entre les points. L'approche que j'ai prise était d'ajouter de nouveaux éléments svg pour chaque ligne.

J'ai réussi à créer un nouvel ensemble d'éléments svg:

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

Où les liens sont un ensemble de tableaux. Chaque rangée interne a 4 valeurs correspondant à la latitude et à la longitude du début et de la fin de chaque ligne: x1, y1, x2 et y2 de la ligne d3.

La fonction pathTransform:

• Enregistrez D3 svg comme une image de haute qualité
• Comment obtenir des données avec tsv ou csv dans array dans d3.js à partir d'un fichier txt?
• Coordonnées parallèles avec case à cocher
• Object Oriented d3
• Deux «appels» pour faire glisser des événements en d3

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

Prend les valeurs de latitude et de longitude et renvoie un élément svg correctement dimensionné et positionné.

En suivant l'exemple avec les éléments svg du marqueur, j'ai essayé d'ajouter une ligne aux éléments markerLink. C'est là que je rencontre des problèmes. Je ne peux pas comprendre comment positionner les lignes dans chaque svg.

Est-ce une bonne approche ou existe-t-il une autre façon d'ajouter des cercles, des chemins, des lignes et des étiquettes aux superpositions de cartes Google?

• D3js: comment interpoler les jeux de données avec des intervalles de temps irréguliers avant de les empiler?
• Les paquets de cercle comme nœuds d'une disposition de force D3
• Est-il possible de dessiner des liens en pointillés uniquement pour les noeuds enfants à enfants de l'arborescence en d3 js
• D3.js forcent la recherche de graphe dirigée
• Grille Donut – Ajouter un titre – NVd3.js