地図上の色を変更するD3

私はJsの初心者で、特定の国（機能colorCountry）の色をD3.jsを使用して変更しようとしています。しかし、どの色を選ぶかは関係ありません。結果は常にオレンジ色で強調表示された地図を表示します。これを解決するために私は何ができますか？地図上の色を変更する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のがあるように思える：

.style("fill", colorCountry);

と変更：あなただけのこの操作を行う場合

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

が簡単になりますあなたの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

答えて

関連する問題