维加地图突出显示

Question

我正在尝试在维基百科上启用维加图形/地图，并寻找一种方法来绘制用不同颜色突出显示的不同国家的地图。因此，对于http://graphtest.wmflabs.org/wiki/Graph:Map的地图，我想要另一个表格，例如US =红色，FR =绿色，HE =蓝色等，这将突出显示给定国家的颜色。图的定义使用数字的国家ID，所以实际上我会有一个表“10”：“红色”等。我似乎无法弄清楚，是如何将国家数据与vega json中的高亮组合。

• 随意编辑网站http://graphtest.wmflabs.org
• 地图数据在http://graphtest.wmflabs.org/wiki/Data:Json:World-110m
• 即使过滤器在graphtest启用，他们将在Wikipedia禁用出于安全考虑

Answer 1

你的问题包括2个问题。

1.标识：

如你所指出的，the JSON you use，使用http://jsoneditoronline.org检查时，似乎使用号码ID，因此您目前无法识别哪个形状是US，FR，HE。更好使用this version与id={country_name_in_english}。我目前没有任何与iso code手中的json，但英语或者ISO对于您的项目都是必需的。我今天旅行。最好和最公平的容易的是获得一个兼具id={country_name_in_english}, iso={iso_code}属性的JSON。这即将推出。

2.维加选择：

我'还不熟悉维加，所以我会处理这是关于如何创建一个纯粹的D3js问题，然后选择合适的形状，并根据相关的颜色他们数据...

//Create your D3js shapes with the right attributes 
var countries = d3.selectAll(".countries") 
    ... // more d3js code creating the countries' shapes here 
    .attr("id", function(d){ return d.id }) // <= important ! 
    ... 

// Custom data 
var coloring = [ [ "US", "red"], ["FR", "green"], ["HE", "blue"] ]; 

// Color the given shapes 
for (i=0; i < color.length; i++) { 
    var focus = d3.selectAll("#"+coloring[i][0]) 
       .style("fill", coloring[i][1]); 
} 

注：这纯粹维加的解决办法是确保更优雅。