我正在使用 d3 在传单 map 上添加 svg 圆圈。 我的 fiddle 在这里 http://jsfiddle.net/nextstopsun/C3U8g/
我添加了一个 reset() 函数来映射 viewreset 事件,以计算包含所有圆圈的 svg g 元素的转换。此函数在 map View 重置事件中调用。
svg.attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px");
g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
(代码来源于本例http://bost.ocks.org/mike/leaflet/)
我可以看到 g 元素的变换参数正在重新计算,但圆圈没有重新定位(或者它们重新定位错误)并且没有与 map tilelayer 对齐。 不过,平移 map 时一切正常。 必须更改什么才能在缩放时正确重新定位?
最佳答案
除了变换包含圆圈的g
元素外,还需要重新设置圆圈本身的坐标:
circles.attr("cx", function (d) { return project([d.m4312, d.m4311])[0]; })
.attr("cy", function (d) { return project([d.m4312, d.m4311])[1]; });
已更新 jsfiddle here .
关于javascript - 缩放传单 map 时,SVG 圆圈不会重新定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17345987/