javascript - 创建具有包容性值的 D3 堆栈图

Question

我要修改basic side bar chart是一个堆栈条形图，它将反射(reflect)部分金额:总计关系。我已经使用以下内容创建了一个矩阵:

[{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)，那也是理想的选择。

现有条形图

// 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

代码模板存在一些问题......我改进了一些来创建一个最简单的堆积条形图..这将帮助您开始...

工作 fiddle : 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);