以 Topojson 名称选择单词的国家/地区的条件颜色

Question

我已经在 D3 中制作了地图，并且之前有条件地为 id 和属性分配了颜色。在这种情况下，我试图根据名称中特定单词的存在有条件地着色。例如：将名称中带有“United”一词的所有国家涂成蓝色，将所有其他国家涂成粉红色。在这种情况下，它会将“United States”、“United Kingdom”和“United Arab Emirates”染成蓝色。 我已经尝试过 indexOf 和 some 和 str.includes 但它导致：Uncaught TypeError: Cannot read property 'includes' of undefined。

这里是代码：https://jsfiddle.net/databayou/retk2pu6/7/

  svg.selectAll(".country")
  .data(topojson.feature(nations, nations.objects.countries).features)
  .enter().append("path")
  .attr("class", function(d) { return "country " + d.name; })
  .attr("fill",function(d){ 
          var str = d.name;
          if (str.includes("United")) { return "blue"}
                            else {return "pink";
                           }
                       })
  .attr("d", path);

Answer 1

将var str = d.name; 更改为var str = d.properties.name;

如果您控制台记录d，您将看到name 在properties 内部。