Harita üzerinde renk değiştirme D3

Js uygulamasına yeni başladım ve belirli bir ülkenin rengini (işlev colorCountry) D3.js. Ancak, hangi rengi seçtiğim önemli değil. Sonuç her zaman turuncuyla vurgulanan haritayı gösterir. Bunu çözmek için ne yapabilirim?Harita üzerinde renk değiştirme D3

Kodum aşağıdaki gibidir.

Teşekkürler.

json dosyası

buradan indirebilirsiniz - 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>

kaynak

2016-04-17 Jas

Ben d3 ile çok aşina değilim ama bu çizgide if ler çok fazla orada görünmek:

.style("fill", colorCountry);

ve değişim: Sadece bunu yaparsanız

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

kolay olurdu basitçe

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

veya sizin colorCountry fonksiyonkurtulmakhep birlikte fonksiyonu ve bu

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

kullanmak Ama neden sadece JSON verilerini güncelleme olmaz?

kaynak

2016-04-17 04:56:56

Merhaba, teşekkürler. JSON verilerini güncelleyerek ne demek istiyorsun? – Jas

Haritanızı oluşturmak için json verilerini kullanıyorsunuz, doğru renk kodlarına sahip olmak için gereken ülkeleri güncellemek daha kolay olmaz mıydı? –

Renk kodları harici verilere göre değişecektir. Tweeter duyarlılık analizi yapacağım, bu yüzden renkler her ülkenin destek/red sayısına göre değişecektir. – Jas

yerine ülke yoluna Bunu yapmanın:

.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); });

Çalışma kodu yapın.

kaynak

2016-04-17 04:55:30 Cyril

Harita üzerinde renk değiştirme D3

cevap

İlgili konular