Question

我正在使用d3在传单地图上添加svg圈子。我的小提琴在这里http://jsfiddle.net/nextstopsun/C3U8g/

我添加了一个reset（）函数来映射viewreset事件，以计算包含所有圆的svg g元素的转换。在map viewreset event上调用此函数。

    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元素的变换参数正在重新计算，但圆圈没有重新定位（或者它们重新定位错误）并且不与地图tilelayer对齐。尽管如此，一切都很好。在缩放时需要更改什么才能正确重新定位？

Answer 1

除了转换包含圆圈的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。

缩放传单地图时，SVG圈不会重新定位

1 个答案: