使用d3在传单上叠加圆圈导致无法正确定位

时间:2016-10-14 15:51:58

标签: javascript d3.js svg leaflet

我想通过getSettingsleaflet地图与circles重叠。

d3

<!DOCTYPE html> <html lang="en"> <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> <body> <div id="map" style="width:600px; height:600px;"> <script> var map = new L.Map("map", { center: [37.8, -96.9], zoom: 4 }) .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")); var svg = d3.select(map.getPanes().overlayPane).append("svg"), svgCircles = svg.append("g").attr("class", "leaflet-zoom-hide"); d3.json("https://jsonblob.com/api/580256bbe4b0bcac9f7ffa43", function(error, myPoints) { if (error) throw error; myPoints.features.forEach(function(d) { d.LatLng = new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]); }); var circles = svgCircles.selectAll("circle") .data(myPoints.features) .enter() .append("circle") .attr("r", 100) .style("fill", "red") .attr("fill-opacity", 0.5); function update() { circles.attr("cx", function(d) { return map.latLngToLayerPoint(d.LatLng).x; }); circles.attr("cy", function(d) { return map.latLngToLayerPoint(d.LatLng).y; }); } map.on("viewreset", update); update(); }) </script> </body> </html> 已添加到circles,但未显示在传单上。我认为它是因为它们定位错误。 这是它的样子: leafletmap

我如何正确定位?注意:我不想使用DOM来获取map._initPathRoot();创建的svg-element

1 个答案:

答案 0 :(得分:1)

首先,这些圈子的半径太大。您的JSON文件中有数千个点,每个点的半径为100px,而您的地图仅为600x600px

其次,您似乎正在尝试关注this tutorial,但是您遗漏了一个关键部分。 Bostock先生谈到了如何计算特征的边界框以将SVG放置在正确的位置。您已离开此部分,因此您的SVG位于0,0,默认大小。

按照他的数据教程生成以下代码。 注意,我将您的JSON数据限制在东北部的几个城市。我不想找到一个容纳6mb JSON的地方(你可能想考虑将该文件缩减到美国城市)。

<!DOCTYPE html>

<html lang="en">

<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>

<body>
  <div id="map" style="width:600px; height:600px;"></div>
  <script>
    var map = new L.Map("map", {
        center: [37.8, -96.9],
        zoom: 4
      })
      .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));

    var svg = d3.select(map.getPanes().overlayPane).append("svg"),
      svgCircles = svg.append("g").attr("class", "leaflet-zoom-hide");

    d3.json("https://jsonblob.com/api/580256bbe4b0bcac9f7ffa43", function(error, myPoints) {
      if (error) throw error;

      var transform = d3.geo.transform({
          point: projectPoint
        }),
        path = d3.geo.path().projection(transform);

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

      myPoints.features.forEach(function(d) {
        d.LatLng = new L.LatLng(d.geometry.coordinates[1],
          d.geometry.coordinates[0]);
      });

      var circles = svgCircles.selectAll("circle")
        .data(myPoints.features)
        .enter()
        .append("circle")
        .attr("r", 10)
        .style("fill", "red")
        .attr("fill-opacity", 0.5);

      // Use Leaflet to implement a D3 geometric transformation.
      function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
      }

      function update() {
        circles.attr("cx", function(d) {
          return map.latLngToLayerPoint(d.LatLng).x;
        });
        circles.attr("cy", function(d) {
          return map.latLngToLayerPoint(d.LatLng).y;
        });
        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] + ")");
      }

      map.on("viewreset", update);
      update();

    })
  </script>
</body>

</html>

对评论的回应

因为我将数据限制在较小的城市子集(纽约州和宾夕法尼亚州),所以边界只计算数据中的数据。 Here it is with all the cities in your JSON(稍等一下加载)。

包含所有数据的快速屏幕截图:

enter image description here