D3:隐藏掉落在海里的voronoi笔画

Question

什么是最不"昂贵"的方式来隐藏掉落在海中的所有voronoi笔画？

在陆地上运行的笔划(和多边形填充)应该是可见的,而在海上的那些应该是隐藏在视野之外的.我认为我的目标应该从下图中清楚:

我可以想到两个选择:

1. 以某种方式'重新'将voronoi多边形重新定位到底层国家('land')多边形.这听起来超级CPU密集.这不是一个好选择,所以我们不要去那里.
2. 在voronoi tesselation上叠加"海"多边形.这在视觉上非常有效,正是我需要的.我如何从国家的基本地图计算新的海洋多边形？(例如,这个 带有geoJSON D3映射的jsfiddle)我有多个具有不同级别多边形复杂度的地图,所以我需要一种简单的方法来构建该地图.

任何ideas？

Answer 1

一个简单的选项，不需要：

• 海洋多边形
• 重绘土地多边形/合并土地多边形
• 剪辑路径

是使用 svg 模式。这可能听起来有点奇怪，我对性能影响并不乐观，但是你的 voronoi 图的模式可以用来填充你的国家/特征（保留边界并允许特征被绘制一次且仅一次） ）。

这要求多边形填充不依赖于地理特征，而是依赖于 voronoi - 您的图像对每个多边形使用相同的填充，但您的问题文本可能表明情况并非如此

要使用这样的图案，请创建一个与地图具有相同宽度和高度的图案。在模式中，放置 voronoi 图路径。最后，将每个特征的填充设置为图案：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var projection = d3.geoMercator()
  .scale((width - 3) / (2 * Math.PI))
  .translate([width / 2, height / 2]);

var path = d3.geoPath()
  .projection(projection);

var graticule = d3.geoGraticule();

d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) {
  if (error) throw error;
  
  // random points:
  var circles = d3.range(20).map(function() {
    return {
      x: Math.round(Math.random() * width),
      y: Math.round(Math.random() * height)
    };
  });
	
  // voronoi:
  var voronoi = d3.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .extent([[-1, -1], [width + 1, height + 1]]);	
      
      
  // pattern:
  var pattern = svg.append("defs")
    .append("pattern")
    .attr("id","voronoi")
    .attr("patternUnits","userSpaceOnUse")
    .attr("width", width)
    .attr("height",height)
    .attr("x",0)
    .attr("y",0)
	  	
  pattern.selectAll("path")
    .data(voronoi.polygons(circles))
    .enter()
    .append("path")
    .attr("d", renderCell)
    .attr("fill",function(d,i) { return d3.schemeCategory20[i]; })
		
  // append paths as normal:
  var features = svg.selectAll(null)
    .data(topojson.feature(world,world.objects.countries).features)
    .enter()
    .append("path")
    .attr("class", "boundary")
    .attr("d", path)
    .attr("fill","url(#voronoi)");  // fill with pattern
	
  function renderCell(d) {
    return d == null ? null : "M" + d.join("L") + "Z";
  }	
	
	 
});

.boundary {
  stroke: black;
  stroke-width: 1px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<svg width="600" height="400"></svg>