如何使用d3.geo填充特定国家的画布？

Question

我创建了自己的预投影topojson文件，并试图改变画布中特定国家的填充风格。http://bl.ocks.org/anonymous/fea6cfde1184e2f10de8是我的代码/示例。我试图捕捉特定的国家代码，并为该国设置一个填充(本例中为德国)。然而，由于某种原因，它也填补了许多其他国家的空白。我怀疑这可能是一个共同的边界问题，但一些不共享边界的国家也会被填满。

同样有趣的是，如果我不像在http://bl.ocks.org/anonymous/3256fe09efaa8d2ebc96中那样渲染其他国家的边界，那么填充就会工作，但显然所有的边界都消失了。难道我根本不理解画布是如何填充工作的吗？是否有不同的方式来突出一个特定的国家？在我看来，我可以用面具来填补一个特定的国家，但这似乎是一个非常迂回的方式。

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

Answer 1

与此示例一样，您需要首先绘制所有边界，然后填充您想要的区域：

  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();

例如这里。