D3珍しい積み上げ棒グラフ

Question

私は珍しい積み上げ棒グラフを行う必要があるとacutally、私はどのようにそれを行うには本当の考えを持っていません。一般的に

それは本当に簡単に聞こえる：

私はint型または文字列のいずれかであることができる、異なる値を持つCSVファイルを持っています。各行は同じ量の値を持ちます。

が、私は今、次のことを行い積み上げ棒グラフ実行する必要があります。 -every列が同じ高さを持っている必要が列ごとに

-Oneバーを （各列のエントリの同じ量を引き起こす）と各バーには、異なる量のスタックごとに1つのスタックが存在する必要があります。 （より頻繁に値が存在し、大きなスタックがなければならない）

例えばCSVファイルは次のようになります

Day, Value 
Mo, 5 
Mo, 3 
Tu, 5 
Tu, 6 

だから日行のiが2つのスタック同じ高さを必要とし、値行に対して1つが1/2の高さであり、他の2つがそれぞれ1/4である3つのスタック。

そして、それは私が持っている問題です。私はインターネット上で見つけることができるすべての例は、各バーのスタックの同じ量で動作します。 （例：https://bl.ocks.org/mbostock/3886394またはhttps://bl.ocks.org/mbostock/1134768）

どのように私はこの問題を解決できますか？

Answer 1

あなたは別のスタックとして各列を処理し、あなたのチャートでそれらを配置する必要があります。このフィドル：https://jsfiddle.net/gwhn1sgv/2/はどのように表示されます。

iのデータ。 e。最初の列、このようなヒストグラムに変換する必要があります

var column = 'Day'; 
var histo = { Mo: 2, Tu: 2 } 

その後、あなたがそれらをスタックして変換することができます：

var keys = Object.keys(histo); 
var stack = d3.stack() 
    .keys(keys)([histo]) 
    //unpack the column 
    .map((d, i) => { 
    return {key: keys[i], data: d[0]} 
    }); 

ので、彼らは次のようになります。あなたの場合は

var stack = [ 
    { key: 'Mo', data: [0, 2] }, 
    { key: 'Tu', data: [2, 4] } 
] 

バンドスケールを有する

var x = d3.scaleBand() 
    .domain(data.columns); 

あなたがx(column)で棒グラフの列を構築することができます。

chart.append('g') 
    .selectAll('rect') 
    .data(stack) 
    .enter().append('rect') 
    // position in the x-axis 
    .attr('x', x(column)) 
    .attr('y', d => y(d.data[0])) 
    .attr("height", d => y(d.data[1]) - y(d.data[0])) 
    .attr("width", x.bandwidth());