Создать диаграмму стека D3 с включенными значениями

Question

Я хочу изменить basic side bar chart как стекную гистограмму, которая будет отражать частичную сумму: общее соотношение. Я уже создал 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/

КОД:

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);