Question

考虑这两个例子（来自这里的原始代码：Overlaying circles on leaflet with d3 results in not positioned properly）：

通过d3在传单上显示点
包含点

http://plnkr.co/edit/DtpqAaiNlI9dyNkPlHik?p=preview

<head>
<meta charset="utf-8">
<title>D3 Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"> </script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
...

和

通过d3在传单上显示点
从硬盘加载.json文件

http://plnkr.co/edit/Lqme891ee8rwDiXktY5L?p=preview

为什么第二个例子中的点在缩放时重新定位，而在第一个例子中没有？！任何解释或指向正确的方向都非常感谢！

Answer 1

看起来你只需要重新计算每次更新的界限。

function update() {
    circles.attr("cx", function(d) {
      return map.latLngToLayerPoint(d.LatLng).x;
    });
    circles.attr("cy", function(d) {
      return map.latLngToLayerPoint(d.LatLng).y;
    });

    // recalculate bounds
    var bounds = path.bounds(myPoints),
        topLeft = bounds[0],
        bottomRight = bounds[1];

    svg.attr("width", bottomRight[0] - topLeft[0])
      .attr("height", bottomRight[1] - topLeft[1])
      .style("left", topLeft[0] + "px")
      .style("top", topLeft[1] + "px");

    svgCircles.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
  }

第二个更大的例子有效，因为这些点遍及整个世界。界限是整个地图，永远不会改变。

更新了plunker example。

当数据为js对象时，使用d3在传单上重新定位点

1 个答案: