在 D3.js 中限制国家边界内的沃罗诺伊图

Question

我正在尝试在地图上生成voronoi图。我试图做的是将沃罗努伊图限制在地图的边界内，但我无法弄清楚如何做到这一点。

这是我现在拥有的部分代码。有人可以提供至少一些想法以便我可以尝试吗？我不知道从哪里开始。我是 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/#

在这里，传单和D3.js结合使用。

如果你进入代码，你会发现在第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 };
  ...

在这里，您可以为窗口应用相应的边界（例如）。

希望这有帮助。