2016-02-15 36 views
0

我用d3製作了一張世界地圖,並且我試圖通過在css中使用它們的id來給某些國家上色。這對除日本和朝鮮以外的所有國家都有效。這是一個fiddle無法在d3世界地圖中爲日本和朝鮮着色

d3.json("world.json",function(error,world){ 

    if (error) return console.error(error); 
    console.log(world) 
    var subunits = topojson.feature(world, world.objects.subunits); 


    var projection = d3.geo.mercator() 
    .translate([width/2, height/2]) 
    .scale((width - 1)/2/Math.PI); 

    var path = d3.geo.path() 
    .projection(projection); 


    svg.selectAll(".subunits") 
     .data(topojson.feature(world, world.objects.subunits).features) 
     .enter().append("path") 
     .attr("class", function(d) { console.log(d.id) ;return "subunit " + d.id; }) 
     .attr("id", function(d){ 
      var str=String(d.properties.name); 
      if(str.replace(/[\s \.]/g, '').localeCompare("KoreanDMZ(north)")==0){ 
       console.log("it worked") 
       return "Northkorea" 
      } 
      else 
       return d.properties.name.replace(/[\s \.]/g, '');}) 
     .attr("d", path); 

    svg.append("path") 
     .datum(topojson.mesh(world, world.objects.subunits, function(a, b) { return a !== b && !(a.id==="RUA"&&b.id==="RUE") })) 
     .attr("d", path) 
     .attr("class", "subunit-boundary"); 


}); 

回答

2

您的CSS代碼使用國家名來標識日本(#Japan)。 JSON數據使用國家名稱來標識一些小島嶼(#日本),但使用島嶼名稱來標識一些大島嶼(#北海道,#Honshu,#九州等)。因此,大島沒有變色。

您的CSS代碼缺少北韓和南韓的標識符。 JSON數據使用#韓國來識別韓國和#DemRepKorea來識別朝鮮。因此,南北韓沒有變色。

+0

感謝您的幫助。 –