D3JS在一个时间范围内堆叠了bar-chart

Question

我的json看起来像这样（我不包括一些额外的记录）

[{"name":"Jim","category":"TechSupport","month":"8",year:"2012","Date":"2012-08-01T04:00:00.000Z", "TechSupport":2,"Management":0,"Sales":0},
{"name":"Jim","category":"Management","month":"8",year:"2012","Date":"2012-08-01T04:00:00.000Z", "TechSupport":0,"Management":3,"Sales":0}]

我的堆栈看起来像

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

我的堆栈的结果看起来像[[0,2],[0,0]],[[2,2],[3,3]],[[1,1],[3,3]]

我的代码在时间表上显示Barchart看起来像

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])})

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

Answer 1

准备数据集 - foreach（）

在您的foreach函数中，我更改了两个小错误。

更改了Tech S upport to Tech s upport如我之前提到的：

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

，通过管理的薪金，我已经向其添加了：

d.Management = +d.cattotal;

准备数据集 - 降低（）

您的JSON具有基于原始数据集的几个对象。必须根据唯一的日期条目减少此数据集。对象值应合并。然后，您有一个很好的堆栈功能的JSON。

这可以通过多种方式实现。我使用realdion（）函数如下：

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 替换，因此我很容易更新 data> data ：

data = dataset;

您当然可以自由选择。

响应Y轴：

y轴必须自动适应堆叠的条，因此我更改了您的Ymax：

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

更新绘制堆叠条和工具提示

最后，我通过调整填充属性来更新您的堆叠条。我为您的主要和NAV图表更改了它。

.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]))

在此小提琴中，您可以找到一个有效的例子。