javascript - 简单堆叠行图

Question

虽然我之前根据 How to stack rects respective of previous rect's height? 使用 let 计数器创建了简单的堆叠行/条形图，但我想看看使用 .keys() 和 .stack() 调用是否有利，就像我们在 Bostock's examples 之一中看到的那样.这是我最近尝试的一个简单片段:

var margins = {top:20, bottom:300, left:30, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var data = [
  {'country':'USA', 'value':.20},
  {'country':'Canada', 'value':.15},
  {'country':'Mexico', 'value':.10}
];

var colorMap = {
  'USA':"#f6d18b",
  'Canada':"#366092",
  'Mexico':"#95b3d7",
  "":"#a6a6a6"
};

var xScale = d3.scaleLinear()
    .range([0,width])
    .domain([0,1]);

var yScale = d3.scaleLinear()
    .range([height,0])
    .domain([0,1]);

graphGroup.append('g')
    .selectAll('g')
    .data(d3.stack().keys(colorMap)(data))
    .enter().append('g')
      .style('fill', function(d) {return colorMap[d.country]; })
    .selectAll('rect')
    .data(function(d) {return d; })
    .enter()
    .append('rect')
      .attr('x', function(d) {return xScale(d); })
      .attr('y', 40)
      .attr('width', function(d) {return xScale(d[0]) - xScale(d[1]); });

<script src="https://d3js.org/d3.v5.min.js"></script>

没有抛出任何错误，我的实现似乎与 Bostock 的示例相同(除了我的是条形图，他的是条形图)。我注意到 keys() 需要一个对象，所以我将 colorMap 传递给它——它有正确的键。

问题

我对 .keys()/.stack() 的实现出了什么问题？结果应该是一排堆叠的矩形，其中宽度是来自数据的 value，如下所示:

var data = [
  {'country':'USA', 'value':.20},
  {'country':'Canada', 'value':.15},
  {'country':'Mexico', 'value':.10}
];

Answer 1

您对 stack() 的作用存在误解。

首先，您的数据还没有准备好传递给堆栈生成器。在您的数组中，每个对象都是一个数据点，仅描述国家及其值(value)。那里没有东西可以堆放。如果您查看 docs ，你会看到:

[...] each series i in the returned array corresponds to the ith key. Each series is an array of points, where each point j corresponds to the jth element in the input data.

每个对象只有两个属性，其中一个是分类属性，而不是定量属性。因此，您不能堆叠您拥有的数据数组。

另一方面，如果你有:

var data = [
  {year: 2016, USA: 0.20, Mexico: 0.10, Canada: 0.15},
  {year: 2016, USA: 0.40, Mexico: 0.04, Canada: 0.45},
  {year: 2016, USA: 0.07, Mexico: 0.19, Canada: 0.17},
  {year: 2016, USA: 0.11, Mexico: 0.30, Canada: 0.18}
];

你可以这样做:

var data = [
  {year: 2016, USA: 0.20, Mexico: 0.10, Canada: 0.15},
  {year: 2016, USA: 0.40, Mexico: 0.04, Canada: 0.45},
  {year: 2016, USA: 0.07, Mexico: 0.19, Canada: 0.17},
  {year: 2016, USA: 0.11, Mexico: 0.30, Canada: 0.18}
];
    
var stack = d3.stack().keys(["USA", "Mexico", "Canada"]);
var stackedData = stack(data);
console.log(stackedData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

另请注意，keys 接受函数或数组，而不是对象。