Wie kann ich mit d3 ein Histogramm oder Balkendiagramm erstellen, wobei der letzte Balken die Anzahl aller Werte angibt, die größer als eine Zahl sind?

Question

Code-Link: https://plnkr.co/edit/jLkoMxdzArBBULHF80nb?p=preview

Ich habe Daten mit einigen dispersen Werten. Es reicht von 61 bis 1,2 m.

Wie kann ich es in einem Histogramm in einer Weise darstellen, die Sinn macht? Kann ich den letzten Eimer auf d3 haben, zum Beispiel > 2000?

So etwas (mehr als 5 Minuten):

Answer 1

Erste aller müssen Sie Ihre Daten organisieren (wenn Sie noch nicht haben), wo Sie müssen nur erstellen eine Variable mit den > 2000 Werten.

Dies ist die Art, wie ich es tat (ich begann d3 letzte Woche und ich habe keine Vorkenntnisse auf JavaScript, so gibt es wahrscheinlich einen besseren Weg, es zu tun):

var data = []; 

for (var i = 0; i < oldData.length; ++i) { 
    if (oldData[i] >= 2000) { 
    data[i] = 2000; 
    } 
    else data[i] = oldData[i]; 
} 

---

Weiter Sache ist o manuell eingestellt werden die Zecken Sie wollen und die tickLabels, die ihm entsprechen:

var ticks = [0,200,400,600,800,1000,1200,1400,1600,1800,2000]; 
var tickLabels = [0,200,400,600,800,1000,1200,1400,1600,1800,"> 2000"]; 

(Beachten Sie, dass Sie auf „1200“ ändern können, und so weiter, wenn Sie das Trenn wollen)

Und statt der d3.axisBottom(x) direkt auf Ihrem Diagramm aufrufen, wie ich eine separate xAxis Variable erstellen, und legen Sie die Zecken und tickLabels zu es:

var xAxis = d3.axisBottom(x) 
       .tickValues(ticks) 
       .tickFormat(function(d,i){ return tickLabels[i] }); 

---

Schließlich Sie die xAxis auf Ihrem Diagramm aufrufen:

chart.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis);