Question

我试图用D3 v4：

在堆积条形图中可视化这些数据

var data = [ 
   {'id': '10', 'status': 'on', 'variant': 'A', 'value': '200'},
   {'id': '10', 'status': 'on', 'variant': 'B', 'value': '500'},
   {'id': '11', 'status': 'off', 'variant': 'A', 'value': '100'},
   {'id': '12', 'status': 'on', 'variant': 'A', 'value': '600'},
   ... 
]

具有相同键id的所有元素应堆叠在x轴上，其中value定义高度，status定义颜色。
数据集可能包含多个具有相同id但不同status或variant的元素，例如示例中的id = 10。哪种格式适合堆叠这些数据？我的方法是嵌套它：

var nested = d3.nest()
  .key(function(d) { return d.id; })
  .entries(data);

从这里我不知道如何生成y0和y1值。我可以使用d3.stack吗？

Answer 1

您可以遍历每个顶级对象中的values数组，并保持总计value，每个y0变为<rect>。 y1然后是y0 + value。

然后将每个顶级对象绑定到表示整个堆栈的<g>标记，将其转换为适当的x位置（假设条形图是垂直的），并将<rect>附加到每个<g>都有values道具作为数据。根据矩阵所在的位置设置矩形的height和y位置。这可能看起来像：

var groups = d3.selectAll("g")
   .data(nested)
   .enter().append("g");
groups.attr("transform","translate...");
var rects = groups.selectAll("rect")
   .data(function(d) { return d.values })
   .enter().append("rect");
rects
   .attr("width",...)
   .attr("height",...)
   .attr("y",...)

D3堆叠条形图的正确数据结构

1 个答案: