在地圖上更改顏色D3

我是Js的初學者，我試圖通過其ID使用D3.js更改特定國家（功能colorCountry）的顏色。但是，無論我選擇什麼顏色都無所謂。結果將始終顯示以橙色突出顯示的地圖。我能做些什麼來解決這個問題？在地圖上更改顏色D3

我的代碼如下。

謝謝。

JSON文件可以在這裏下載 - https://gist.githubusercontent.com/d3noob/5193723/raw/6e1434b2c2de24aedde9bcfe35f6a267bd2c04f5/world-110m2.json

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

    body { 
     background: #fcfcfa; 
    } 

    .stroke { 
     fill: none; 
     stroke: #000; 
     stroke-width: 3px; 
    } 

    .fill { 
     fill: #fff; 
    } 

    .graticule { 
     fill: none; 
     stroke: #777; 
     stroke-width: .5px; 
     stroke-opacity: .5; 
    } 

    .land { 
     fill: #888; 
    } 

    .boundary { 
     fill: none; 
     stroke: #fff; 
     stroke-width: .5px; 
    } 

</style> 
<body> 
<script src="//d3js.org/d3.v3.min.js"></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 
<script> 

    var countryCode = 840; //36: AUSTRALIA * 643: RUSSIA * 76: BRAZIL * 840: USA 

    var width = 960, 
      height = 580; 

    var color = d3.scale.category10(); 

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

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

    var graticule = d3.geo.graticule(); 

    var svg = d3.select("body").append("svg") 
      .attr("width", width) 
      .attr("height", height); 

    svg.append("defs").append("path") 
      .datum({type: "Sphere"}) 
      .attr("id", "sphere") 
      .attr("d", path); 

    svg.append("use") 
      .attr("class", "stroke") 
      .attr("xlink:href", "#sphere"); 

    svg.append("use") 
      .attr("class", "fill") 
      .attr("xlink:href", "#sphere"); 

    svg.append("path") 
      .datum(graticule) 
      .attr("class", "graticule") 
      .attr("d", path); 



    d3.json("world-110m2.json", function(error, world) { 
     if (error) throw error; 

     var countries = topojson.feature(world, world.objects.countries).features, 
       neighbors = topojson.neighbors(world.objects.countries.geometries); 
     svg.selectAll(".country") 
       .data(countries) 
       .enter().insert("path", ".graticule") 
       .attr("class", "country") 
       .attr("d", path) 
       .style("fill", function(d) { if (d.id == countryCode) { return color(colorCountry(d, d.id));} }); 

     svg.insert("path", ".graticule") 
       .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) 
       .attr("class", "boundary") 
       .attr("d", path); 

     console.log("value : " + countries[99].id); 
     console.log("value : " + countries[12].id); 
     console.log("value : " + countries[108].color); 

    }); 

    /*HERE*/ 
    function colorCountry(country, countryId) { 
     if (country.id == countryId) { 
      return color(country.color = "#FF0000"); 
     } 
    } 

    d3.select(self.frameElement).style("height", height + "px"); 

</script>

來源

2016-04-17 Jas

我不是很熟悉，D3，但似乎是在這一行太多if S：

.style("fill", function(d) { if (d.id == countryCode) { return color(colorCountry(d, d.id));} });

會較簡單，如果你只是這樣做：

.style("fill", colorCountry);

和變化您的colorCountry功能爲

function colorCountry(country) { 
    if (country.id == countryCode) { 
     return '#FF0000'; 
    } else { 
     return color(country.id); 
    } 
}

或乾脆擺脫colorCountry功能全部在一起，並使用它

.style("fill", function(d) { 
    return (d.id == countryCode) ? '#FF0000' : color(d.id); 
});

但爲什麼你不只是更新JSON數據？

來源

2016-04-17 04:56:56

嗨，謝謝。更新JSON數據是什麼意思？ – Jas

我的意思是你使用json數據來建立你的地圖，在那裏更新所需的國家有正確的顏色代碼是不是更容易？ –

顏色代碼將根據外部數據而改變。我會做高音分析，因此顏色會根據每個國家的支持/拒絕數量而改變。 – Jas

而是這樣做是爲了國家的路徑：

.style("fill", function(d) { 
    if (d.id == countryCode) { //there is no need for a condition. 
     return color(colorCountry(d, d.id));//this is buggy, not clear what you trying to achieve. Color scale already return a color for the country id. 
    } 
});

做這個

.style("fill", function(d) {return color(d.id); });

工作代碼。

來源

2016-04-17 04:55:30 Cyril

在地圖上更改顏色D3

回答

相關問題