D3スタックチャートのインクルーシブ値の作成

Question

basic side bar chartをスタック棒グラフに変更したいので、partial-amount：totalの関係が反映されます。私はすでに次のようにmatrixを作成しました：

[{y:0, x0:221, x1:1670}, 
{y:1, x0:581, x1:1473}, 
{y:2, x0:2485, x1:2643}, 
{y:3, x0:135, x1:8714}, 
{y:4, x0:31, x1:211}] 

参考のために、それぞれの場合に真の合計はx0 + x1だろう。

私は合計の通常の棒グラフを持っていますが、積み上げグラフに変換する方法を理解できません。また、データを変更することなく（x0から実際の合計値を引いてx1を得る）これを達成する方法があれば、それも理想的です。

既存BarChartコントロール

// Constants 
var width = 450, 
    barHeight = 20, 
    height = 300, 
    padding = 10, 
    leftMargin = 10; 

var typeBarChart = d3.select('.typeBarChart') 
    .attr('width', width) 
    .attr('height', barHeight*dataGroupByType.length); // dataGroupByType is a D3 nest data series with length is 5 

// X-axis; 
var x = d3.scale.linear() 
    .domain([0, maxCrime]) // maxCrime determine elsewhere, approx. 8850 
    .range([0, width]); 

var chart = d3.select(".typeBarChart") 
    .attr("width", width) 
    .attr("height", barHeight * dataGroupByType.length); 

var bar = chart.selectAll("g") 
    .data(dataGroupByType) 
    .enter() 
    .append("g") 
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

bar.append("rect") 
    .attr("width", function(d) { return x(d.values); }) 
    .attr("height", barHeight - 1); 

bar.append("text") 
    .attr("x", function(d) { 
     if (d.values < 1000) { 
     return x(d.values) + 20; 
     } else { 
     return x(d.values) - 3; 
     } 
    }) 
    .attr("y", barHeight/2) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.values; }); 

Answer 1

コードテンプレートを持ついくつかの問題があります.... 私は、最も単純な積み重ね棒グラフを作成するには、いくつかの洗練された。これは、あなたが始めるのに役立つだろう...

ワーキングフィドル：https://jsfiddle.net/egmf47ne/

CODE：

HTML

<div class ="typeBarChart"></div> 

JS

var _data = [{y:0, x0:221, x1:1670}, 
{y:1, x0:581, x1:1473}, 
{y:2, x0:2485, x1:2643}, 
{y:3, x0:135, x1:8714}, 
{y:4, x0:31, x1:211}] 

// Constants 
var width = 450, 
    barHeight = 20, 
    height = 300, 
    padding = 10, 
    leftMargin = 10; 

var typeBarChart = d3.select('.typeBarChart') 
    .append('svg') 
    .attr('width', width) 
    .attr('height', barHeight*_data.length); 

var x = d3.scale.linear() 
    .domain([0, 8850]) // maxCrime 
    .range([0, width]); 

var bar = typeBarChart.selectAll("g") 
    .data(_data) 
    .enter() 
    .append("g") 
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 

bar.append("rect") 
     .attr("fill","blue") // blue bars of x0 + x1 
    .attr("width", function(d) { return x(d.x0 + d.x1); }) 
    .attr("height", barHeight - 1); 

bar.append("rect") 
     .attr("fill","red") // red bars of x0 only 
    .attr("width", function(d) { return x(d.x0); }) 
    .attr("height", barHeight - 1);