Question

我试图在地图上生成voronoi图。我想要完成的是将voronooi图限制在地图的边界内，但我无法弄清楚如何做到这一点。

这是我现在的代码的一部分。有人能提供至少一些想法，以便我可以尝试吗？我不知道从哪里开始。我是d3.js的新手。

非常感谢你！

  var vertices = dhs.map(function(d) { return [+d.lon, +d.lat]; });
  var median = dhs.map(function(d) { return +d.dhsMedian; });
  var max = d3.max(median, function(d) { return d; });
  var min = d3.min(median, function(d) { return d; });
  console.log(max);
  console.log(min);

  var medianScale = d3.scale.linear()
                      .domain([min, max])
                      .range([0, 90]);
  var voronoi = d3.geom.voronoi()
      .clipExtent([0, 0], [width, height]);

  var voronoied_vertices = voronoi(vertices);

  var input = [];
  for (var i = 0; i < vertices.length; i++) {
    input.push(
        {
          "vertice":voronoied_vertices[i],
          "median":medianScale(median[i])
        }
      )
  };

  layer4.selectAll("path")
     .data(input)
     .enter().append("svg:path")
     .classed("voronoi", true)
     .attr("d", function(d) { return "M" + d["vertice"].map(function(d) { return projection(d); }).join("L") + "Z"; })
     .attr("id", function(d) {
      console.log(d['median']);
        if ( 0 <= d["median"] && d["median"] < 10) { return "color1"; }
        else if (10<= d["median"] && d["median"] <20) { return "color2"; }
        else if (20<= d["median"] && d["median"] <30) { return "color3"; }
        else if (30<= d["median"] && d["median"] <40) { return "color4"; }
        else if (40<= d["median"] && d["median"] <50) { return "color5"; }
        else if (50<= d["median"] && d["median"] <60) { return "color6"; }
        else if (60<= d["median"] && d["median"] <70) { return "color7"; }
        else if (70<= d["median"] && d["median"] <80) { return "color8"; }
        else { return "color9"; }

     });

  layer1.selectAll(".district")
      .data(topojson.feature(rwanda, rwanda.objects.district).features)
    .enter().append("path")
      .attr("class", "district")
      .attr("id", function(d) { return "district" + d.id; })
      .attr("d", path);

Answer 1

如果您拥有所有voronoi和国家形状，请从形状外的voronoi图中找到边缘，并找到与国家边缘的交点。你可以试试国家边缘的中点。

Answer 2

您可以查看以下示例：

https://chriszetter.com/voronoi-map/examples/uk-supermarkets/#

此处，Leaflet和D3.js组合使用。

如果你进入code，你会在92ff行找到：

var bounds = map.getBounds(),
    ...
    ...
    ...
    drawLimit = bounds.pad(0.4);

filteredPoints = pointsFilteredToSelectedTypes().filter(function(d) {
  var latlng = new L.LatLng(d.latitude, d.longitude);

  if (!drawLimit.contains(latlng)) { return false };
  ...

您可以在此处应用窗口的相应边界（例如）。

希望这有帮助。

在d3.js中限制国家边界内的voronoi图

2 个答案: