如何使用带有画布的 d3.geo 填充特定国家/地区

How do you fill specific countries using d3.geo with canvas?

本文关键字：填充 国家 地区 geo d3 何使用      更新时间：2023-09-26

我创建了自己的预投影拓扑文件，并尝试在画布中更改特定国家/地区的填充样式。 http://bl.ocks.org/anonymous/fea6cfde1184e2f10de8 是我的代码/示例。我试图捕获特定的国家/地区代码并为该国家/地区（在本例中为德国）设置填充。但是，出于某种原因，它也填补了许多其他国家。我怀疑这可能是一个共享边界的问题，但一些不共享边界的国家也会被填满。

同样有趣的是，如果我不像 http://bl.ocks.org/anonymous/3256fe09efaa8d2ebc96 那样渲染其他国家的边界，但显然所有的边界都消失了。我只是不明白画布填充的工作原理吗？有没有其他方法来突出特定国家/地区？我突然想到，我可以用面具来填充一个特定的国家，但这似乎是一种非常迂回的方式。

请注意，我知道使用 SVG/CSS 更简单，但我真的很想让它在画布上工作。

就像在这个例子中，你需要先画所有的边框，然后填充你想要的区域：

  var isDEU = null;
  for (var i = 0; i < geoJson.features.length; i++) {
    if (geoJson.features[i].id == "DEU") {
      isDEU = geoJson.features[i];
    }
    context.save();
    canvasPath(geoJson.features[i]);
    context.stroke();
    context.restore();
  }
  context.fillStyle = "#f00"
  context.beginPath();
  canvasPath(isDEU);
  context.fill();

这里的例子。

相关文章：