d3.js - 使用 d3 着色多边形

Question

在走错路之前，任何人都可以解释这是否完全可能：

我有以下代码：

var path = d3.geo.path();
var svg = d3.select("#d3Map").append("svg");
var countries = svg.append("g").attr("id", "countries");
d3.json("scripts/plugins/d3-master/examples/data/world-countries.json", function (json) {
  d3.select("svg")
    .selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d",d3.geo.path().projection(d3.geo.equirectangular().scale(1500)));
});

确实可以加载并显示世界各国。完美运行。

然而，我想做的是改变少数几个国家的颜色。

查看生成的 SVG 后，似乎没有该国家/地区的 ID（即使 JSON 文件确实具有“名称”属性）。

有没有可能做类似的事情：

突出显示（国家名称，RGB）

还是我在这里使用了错误的工具？

Answer 1

为什么不

d3.select("svg")
  .selectAll("path")
  .data(json.features)
.enter()
  .append("path")
  .attr("d",d3.geo.path().projection(d3.geo.equirectangular().scale(1500)))
  .attr("fill", "#c00")// <- Set color like this, or pass a function
// Or
  .attr("id", function(feature) {
    /* something like: return feature.properties.id; */
  })
// Or
  .attr("class", function(feature) {
    return feature.population > 1e6 ? 'populous' : 'rural';
  });