GoogleマップとD3.js

Question

これまでのプロジェクトでこれがうまく機能しましたが、困った新しいデータでそれを再現するのは難題です。

ポイントはレンダリングされていますが、適切な場所には表示されません。また、ズームインしたりズームアウトしたりすると、ポジションが変わります。longとlatが同じであることをダブルチェックしました。

機能変換（d）の{

  d = new google.maps.LatLng(+d.Latitude, +d.Longitude); 
      d = projection.fromLatLngToDivPixel(d); 
      return d3.select(this) 
       .style("left", (d.x - padding) + "px") 
       .style("top", (d.y - padding) + "px"); 

}

はfromLatLngToDivPixel（d）は、間違ったポイントを置くか、何かが上書きされます。

私はこの問題は、変換関数であると思います左と上のスタイル？どんな助けでも大歓迎です。ここでは、 'まだ未だ'実用的な例があります - コードはgist.github.comにあります。

https://bl.ocks.org/BMPMS/36dfbe319f6a6f4cfb56205e95687024

Answer 1

P.P.Sは、私はそれを解決してきました。 CSS、私の愚かなことは推測できません。必要なCSSは次のとおりです - 衛生は個々の層のクラスです：

.hygiene, .hygiene svg {position: absolute;} 

.hygiene svg { 
    width: 60px; 
    height: 60px; 
    padding-right: 100px; 
    font: 10px sans-serif; 
} 

.hygiene circle { 
    fill: #DC143C; 
    stroke: grey; 
    stroke-width: 0.5px; 
}