負の値を持つ棒グラフ

Question

負の値を持つことができるd3棒グラフを作成する必要があります。理想的には、軸のゼロ位置はデータの範囲に基づいて計算する必要がありますが、正負の対称性を仮定した解決策、つまり常にグラフの真ん中にあることになります。

これは私が達成したいものの例です。

Answer 1

OK、あなたはあなたのデータセットと数字の配列を持っているとしましょう、これは、いくつかの正と負の値が含まれています。あなたは棒グラフを構築するために2つのスケールをお勧めします

var data = [-15, -20, -22, -18, 2, 6, -26, -18]; 

。 x軸に沿った棒の位置を計算するには量的な目盛り（通常は linear scale）が必要で、 y軸に沿って棒の位置を計算するには2番目の ordinal scaleが必要です。

定量的なスケールでは、通常、最小値と最大値に基づいてデータのドメインを計算する必要があります。それを行うための簡単な方法はd3.extent経由です：あなたはまた、少し範囲を丸めるnice規模にしたいかもしれません

var x = d3.scale.linear() 
    .domain(d3.extent(data)) 
    .range([0, width]); 

。

var x0 = Math.max(-d3.min(data), d3.max(data)); 

var x = d3.scale.linear() 
    .domain([-x0, x0]) 
    .range([0, width]) 
    .nice(); 

また、あなたがすることができます別の例として、時にはあなたは、ゼロ値を使用すると、最小値と最大値の大きいを取るしたいと思うその場合には、キャンバスの中央にセンタリングしたいですあなたが望むドメインをハードコードします。

var x = d3.scale.linear() 
    .domain([-30, 30]) 
    .range([0, width]); 

はY - 軸に対しては、各バーのためのバンドに垂直方向のスペースを分割するrangeRoundBandsを使用したいと思います。これにより、バー間のパディング量を指定することもできます。多くの場合、名前や一意のIDなどの識別データと共に順序尺度が使用されます。しかし、あなたはまた、データのインデックスに連動して順序尺度を使用することができます。

var y = d3.scale.ordinal() 
    .domain(d3.range(data.length)) 
    .rangeRoundBands([0, height], .2); 

今、あなたはあなたの2つの尺度を持っていることを、あなたはバーを表示するRECT要素を作成することができます。 1つのトリッキーな部分は、SVGでは、左上隅に基づいて矩形が配置されます（xとyの属性）。したがって、左上隅の位置を計算するには、x - およびy -scalesを使用する必要があります。また、関連する値が正か負かによって異なります。値が正の場合、データ値は、バーの右端を決定し、負の場合は、バーの左端を決定します。したがって、条件式は次のとおりです。

最後に、上に目盛りを表示する軸を追加できます。また、正の値と負の値の外観を区別するために、塗りつぶしスタイル（またはグラデーション）を計算することもできます。すべて一緒にそれを置く：

• Bar Chart with Negative Values