Einfärben einer Karte mit D3.js

Question

Ich bin neu in StackOverflow und ich habe gerade angefangen, D3 zu verwenden. Ich muss die Werte auf einer Karte zeigen. Ich sah this question das ist sehr ähnlich zu dem, was ich tun sollte.

Was ich möchte ist, die Länder basierend auf den Werten in der Spalte Date zu einer CSV und basierend auf ausgewählten Jahr für Benutzer (Radio-Button) zu färben. Wie kann ich das tun?

Ich erstellte eine graue Farbskala und habe sie in ein Array aufgenommen, dann erstellte ich eine Methode chooseColor(value), die die richtige Farbe basierend auf dem Wert des Landes in diesem Jahr zurückgibt. Ich denke, es ist nicht die effizienteste Methode, dies zu tun ...

Auch in meiner CSV gibt es nicht alle Länder in der Europäischen Union. Zum Beispiel habe ich keine Daten über Russland, also habe ich einige Länder "ausgeschaltet", indem ich if in das Ereignis auf mouseover setzte. Aber ich würde auch einen Teil von Russland in der Karte schneiden, um die bekannten Länder zu vergrößern. Wie kann ich auch das Ding machen?

ich bei diesen Beispielen sah: Choropleth und Threshold Choropleth von Mike Bostock auf bl.ocks.org aber ich verstehe nicht, wie die Länder einzufärben ... (wollte ich Links setzen, aber ich kann 't posten mehr als 2 Links wegen meines schlechten Rufs)

This is my code.

Ich entschuldige mich für mein schlechtes Englisch. Vielen Dank an alle,

Pier

EDIT

ich zugeben, dass ich nicht ein paar Dinge in Ihrem Code verstehen.

1. Warum brauche ich Ereignisse on mouseover und mouseout? Und was sind und rhover? Ich dachte, sie wären Ereignisse im Zusammenhang mit this question. Aber in meinem Fall brauche ich es nicht, oder?
2. Verwenden array_values oder d ist das gleiche, oder? Ändert sich nicht, wenn ich d oder array_values verwende, oder? Es ist eine dumme Frage, aber es hat mich verwirrt.

3. Ich modifizierte die makemap Methode auf diese Weise. Ich verstehe richtig, wie man deinen Code benutzt?

   Funktion makemap (Fehler, Europa, Dessease) { desss = dessease.slice(); counties = topojson.feature (europe, europe.objects.collection);

   vector = svg.selectAll("path") 
       .data(counties.features) 
       .enter() 
       .append("path") 
       .attr("class", "county") 
       .attr("id", function(d) { 
        return "coun" + d.properties.indx; 
       }) 
       .attr("d", path) 
       .style("fill", function(array_values) { 
        return color(array_values[d.country]); 
       }); 
   

In diesem Fall gibt es einen Fehler in Bezug auf d, natürlich. Sorry, ich weiß nicht, wo ich falsch liege ...

Answer 1

Die Farbe des Landes hängt von einem Wert ab. Die Farbe ist also eine Funktion von "Wert".Um dies zu tun, müssen Sie eine Reihe von Farbe zu definieren, basierend auf Ihre Werte:

var color = d3.scale.linear() 
         .domain([mn,mx])  // <--- min and MAX of your value 
         .range(["#ffffff","000000"]); 

dann definieren Sie die Farbe Ihres Landes:

svg.selectAll(".county") 
        .style("fill", function(array_values) { 
         return color(array_values[d.country]); 
        }); 

Must-Read: Jerome Cukier - d3: scales, and color