D3.js v4でビン幅を固定してヒストグラムを作成する方法は？

Question

the official D3.js v4 histogram exampleから、アイリス "PetalLength"値のヒストグラムを表示したいとします。

ビンを見て、これは完璧な理にかなっている：彼らはすべて

はhttp://codepen.io/netzwerg/pen/KNOYBy

私の問題は、最後のビンは、x軸の上限を超えまたがるということですを参照してください最後のものを除いて、1の幅を有し、これはx0: 6からx1: 6.9までしかない。

すべてのsvg矩形が固定幅（bins[0]に基づいて）で作成されているとすると、オーバーラップを説明することができます。

I手動X-範囲 "よりよい"（7に丸める）を作ることができる：

var x = d3.scaleLinear() 
     .domain(d3.extent(values)) 
     .rangeRound([0, width]) 
     .nice(); 

"修正" 問題を。

また、個々のビンのx0とx1に基づいて、幅の狭い最後のビンを描画するようにsvgの矩形の幅の計算を調整できます。

しかし、最終的には、私の質問は次のとおりです。

私はすべてが同じ幅を有するビンを作成するために、d3.histogramを伝えるにはどうすればよいですか？ドキュメントによれば

Answer 1

：

閾値が値の配列[X0、X1、...]のように定義されます。 x0より小さい値は最初のビンに配置されます。 x0以上x1未満の任意の値が2番目のビンに入れられます。等々。

あなたのしきい値は正しくありません。この：

[1, 2, 3, 4, 5, 6]; 

そして、そのため、最後のビンが以前よりも狭くされて、ちょうど6.0から6.9（0.9の幅）に行っていた。

.thresholds(x.ticks(5)); 

はあなたを与えるつもりです1つ（幅1.0）。その代わりに

、これはあなたの閾値を次のようになります。

あなたは正しい値を与えるために起こっている

.thresholds(d3.range(1, x.domain()[1], (x.domain()[1]-1)/6)); 
//   start----^ end---^   step----^ 

：http://codepen.io/anon/pen/aBegWW?editors=0010：ここ

[1, 1.983, 2.966, 3.95, 4.933, 5.916] 

はその変更を使用して更新CodePen、あります

ここで、ビンの幅が同じであることがわかります。0.983とはありません。のt裾はもう丸型の目盛りで終わります。

編集：私は同意したとOPからthis commentによると、これは読みやすく代替です：

const [min, max] = d3.extent(values); 
const thresholds = d3.range(min, max, (max - min)/binCount);