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.
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
Post a Comment