Wie Maximalwert aus einem Array von Objekten in d3.scale.linear() nutzen, um Domain()

Question

Ich habe eine externe CSV-Datei mit Daten in Spalten wie folgt:.

name, field_goal_attempts, field_goal_makes 

Ich versuche, eine lineare Skala zu verwenden, aber es fällt mir schwer, den Maximalwert für meine Domain zu bekommen.

var yScale = d3.scale.linear() 
       .domain(0, d3.max(... 

Ich bin verwirrt,:

1) Ob ich außerhalb der yScale Funktion oder innerhalb der

d3.csv("filename.csv", function(data) { 

Callback-Funktion setzen sollte; und

2) So erhalten Sie den maximalen Wert der Elemente in der Spalte field_goal_attempts, um dann in die yScale-Funktion einzufügen.

Hier ist mein Code derzeit:

var yScale = d3.scale.linear() 
    .domain([0, 4000]) //d3.max(data, function(d) {return d })]) 
    .range([0, 500]); 

d3.csv("test.csv", function (data) { 
    svg.selectAll("rect") 
     .data(data) 
     .enter() 
     .append("rect") 
     .attr("fill", "blue") 
     .attr("x", magic_number) // I'm not concerned about the magic numbers at this point :) 
     .attr("y", 0) 
     .attr("width", another_magic_number) 
     .attr("height", function (d) { 
      return d.field_goal_attempts 
     }) 
     .attr("id", function (d, i) { 
      return i 
     }); 
}); 

Answer 1

Die Daten in Ihrer CSV-Datei werden in dem Rückruf sein, den Sie an die CSV-Funktion übergeben (in Ihrem Fall den Parameter "data"). Sie können also yScale außerhalb der csv-Funktion definieren, aber wenn Sie möchten, dass das Maximum datenabhängig ist, müssen Sie es innerhalb des Callbacks setzen.

Um das Maximum zu finden, akzeptieren viele D3-Funktionen, die auf Arrays funktionieren, optionale Accessor-Funktionen für genau Ihr Szenario. So Berechnung der max würde ich verwenden:

var max = d3.max(data, function(d) { return +d.field_goal_attempts;}); 

So könnte man es alle zusammen eine von zwei Möglichkeiten:

var yScale = d3.scale.linear().domain(0,100); 
d3.csv("test.csv", function(data){ 
    var max = d3.max(data, function(d) { return +d.field_goal_attempts;}); 
    yScale.domain([0,max]); 
    ... 
} 

oder

d3.csv("test.csv", function(data){ 
    var max = d3.max(data, function(d) { return +d.field_goal_attempts;}); 
    var yScale = d3.scale.linear().domain([0,max]); 
    ... 
} 

Wenn Sie sowohl max finden wollen und Dann schlage ich vor, d3.extent (...) zu verwenden, das auch eine Accessor-Funktion akzeptiert und ein Array der Länge 2 mit den Min- und Max-Werten zurückgibt.

Answer 2

1) Die yScale kann außerhalb der d3.csv() Funktion bleiben, solange Sie die Domäne aktualisieren, innerhalb der Funktion, wenn der max berechnet zu haben. Sie können beispielsweise die folgenden innerhalb von d3.csv() tun könnte:

yScale.domain([0, my_max]) 

2) die max zu berechnen, hier ist die Methode, die ich in der Regel verwenden:

//Create list containing only field_goal_attempts 
field_goal_attempts_list = data.forEach(function(d){return d.field_goal_attempts}) 

//Compute max using d3.max() function 
field_goal_attempts_max = d3.max(field_goal_attempts_list) 

Es ist wahr, dass eine solche Funktion zu d3.max() vorbei würde Großartig, aber so weit ich weiß, ist es nicht. Der Vorteil, zuerst die Liste zu berechnen und dann das Maximum zu berechnen, besteht darin, dass Sie weniger rechnen, wenn Sie das Minimum, den Mittelwert oder irgendetwas anderes berechnen wollen.