d3を使用して、ヒストグラムまたは棒グラフを作成するにはどうすればいいですか最後の棒はいくつかの数値より大きいすべての値のカウントですか？

Question

コードリンク：https://plnkr.co/edit/jLkoMxdzArBBULHF80nb?p=preview

私はいくつかの分散値を持つデータを持っています。それは61から1.2メートルの範囲です。

どのように私は理にかなっている方法で、ヒストグラムで表すことができますか？ d3の最後のバケットは、たとえば> 2000にできますか？

（5分を超える）このような何か：あなたは（あなたがまだいない場合）あなたのデータを配置する必要がありますすべての

Answer 1

まず、あなただけ作成する必要があります> 2000の値を持つ変数

これは私がやった方法（私は先週d3を開始し、私はJavaScript上の任意の以前の知識を持っていないので、それを行うには良い方法はおそらくあります）です。

var data = []; 

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

---

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"]; 

：次事は、手動で設定したいティックとそれに対応tickLabels Oであり、 （あなたは「1200」に変更することができることに気づくというようにあなたは、セパレータをしたい場合）

を、代わりに自分のチャートに直接d3.axisBottom(x)を呼び出すので、私は別のxAxis変数を作成したい、とにダニやtickLabelsを設定それ：

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

---

最後あなたは、チャート上xAxisを呼び出す：

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