Javascript 时间尺度上的D3JS堆叠条形图

我的JSON看起来像这样（为了简洁起见，我没有包括一些额外的记录）

我的堆栈看起来像这样

var stack = d3.stack().keys(["TechSupport", "Management", "Sales"])
var series = stack(data)

var groups = mainChart.selectAll("g")
.data(series)
.append("g")

groups.selectAll("rect")
.attr("id","bar")
.attr("fill", function(d){return colors(d.data.category)})
.attr("x", function(d){return xScale(d.data.Date);}}
.attr("y", function(d){return yScale(d[1]);})
.attr("width", 20)
.attr("height" return yScale(d[0]) - yScale(d[1])})

我的堆栈的结果看起来像

[[0,2]，[0,0]]，[[2,2]，[3,3]]，[[1,1]，[3,3]]

我在时间刻度上显示条形图的代码如下所示

var stack = d3.stack().keys(["TechSupport", "Management", "Sales"])
var series = stack(data)

var groups = mainChart.selectAll("g")
.data(series)
.append("g")

groups.selectAll("rect")
.attr("id","bar")
.attr("fill", function(d){return colors(d.data.category)})
.attr("x", function(d){return xScale(d.data.Date);}}
.attr("y", function(d){return yScale(d[1]);})
.attr("width", 20)
.attr("height" return yScale(d[0]) - yScale(d[1])})

---

我可以沿着时间线正确显示所有内容，除非我有相同日期的项目，这些项目没有堆叠，而且我不知道为什么？

准备数据集-forEach（）

在forEach函数中，我修改了两个小错误

将技术支持更改为技术支持，如我前面提到的：

else if(d.category == 'Techsupport')

通过全面的管理，我在其中添加了一个+：

d.Management = +d.cattotal;

---

准备数据集-reduce（）

您有一个JSON，其中包含基于原始数据集的多个对象。必须根据唯一的日期条目缩减此数据集。应该组合对象值。然后，您就有了一个很好的用于堆栈函数的JSON

这可以通过几种方式实现。我使用了一个reduce（）函数，如下所示：

var dataset = [];
data.reduce(function(res,obj){
   var key = obj.Date;
   if (res[key]){
       res[key].Sales +=obj.Sales;
       res[key].Techsupport +=obj.Techsupport;
       res[key].Management +=obj.Management;
   } else {
       dataset.push(o);
       res[key] = obj;
   }
   return res;
}, {});

数据集包含为堆栈函数准备好的数据。但是，我不想在您的整个代码中用数据集替换数据，因此我轻松地更新了数据：

data = dataset;

当然，你可以自由选择其他方式

响应性y轴：

y轴必须自动适应堆叠的钢筋，因此我更改了yMax，如：

var yMax = d3.max(series[series.length - 1], function(d) { return d[1]; });

更新堆叠的条形图和工具提示

最后，我通过调整“填充”属性更新了堆叠的条形图。我更改了主导航图和导航图

.attr("fill", function(d){ return colors(d3.select(this.parentNode).datum().key)})

对于工具提示，我已更新关键点和总值：

div.html("Date: " +d.data.Date + "<br>" + "Category: " + d3.select(this.parentNode).datum().key + "<br>" + "Total:" + (d[1]-d[0]))

div.html（“日期：+d.data.Date+”
“+”类别：+d3.select（this.parentNode.datum（）.key+”
“+”总计：+（d[1]-d[0]））

---

在这里，你可以找到一个有效的例子。

你能做一把小提琴，并更具体地说明你想要实现的目标吗？我想这会帮助我理解这个问题。是的，给你。如果你注意到它没有堆叠，它只是在同一个日期叠加，应该堆叠的地方。我相信“系列”中的堆叠数据有问题。我并不反对这一点，但具体是什么？本质上，我试图显示一个人在一个部门一个月内工作的次数，如果他们在同一个月内工作过多个部门，则显示数据堆叠，查看JSON，我可以添加或更改什么以使其工作？首先，您犯了一个小错误。在forEach函数中，应将

技术支持

替换为

技术支持

。这将解决一个事实，即您的系列中有不应该存在的

管理
值。其次，您有一个JSON，其中5个对象基于原始数据集，4个对象基于唯一的日期条目。2013年3月的两个对象应合并为一个。然后，您就有了一个很好的用于堆栈函数的JSON。我希望我能给你一个好的方向。所以在实现这个过程中，我发现了一个bug，我不确定它为什么会发生。我已经更新了我的小提琴，看看2012年1月的堆栈。它有3个数据项（最初）和3个类别，但当显示时，它并没有显示堆叠，而是显示了两次销售？第二，有没有一种方法可以使用这个。reduce方法来确定y轴的最高“叠加”值？这里是小提琴再次你想如何实现不同的人（詹姆斯，吉姆，…）到图形中？我们是否应该将Jim和James在一起约会时的销售额（加起来）？不同的人并不是真正相关的，页面实际上只允许一个人，我只是将卡住的数据放在手上，因为我无法直接从我的其他网络复制，如果事实上我已经制作了James Jim，以免混淆问题。基本上，这个图表只能有一个人，这个人一个月可以在三个部门中的任何一个部门工作，我需要将他的每月工作总数叠加起来，并随着时间的推移显示出来，使用堆栈将每个部门的计数按颜色分解，就像我们正在做的那样，但是y轴上所有部门的月份总数仍然存在在这个问题上。不确定堆栈为什么不工作？好的，现在一切都有意义了。在本课程中，查看是否可以在将数据发送到D3之前对其进行分组：