Google Maps and D3.js -


i've got working on on previous project i've come across stumbling block replicating new data puzzle.

the points rendering not in right place. also, when zoom in , out points change position - i've double checked long , lat same.

i think problem in transform function:

function transform(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"); 

}

is fromlatlngtodivpixel(d) placing points wrong or overriding left , top styles? appreciated. here 'not yet' working example - code on gist.github.com.

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

p.p.s i've solved it. css, silly of me not guess. required css follows - hygiene being class of each individual layer :

 .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; } 

Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -