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

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

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 支持更改为Tech S 支持，就像我之前提到的那样：

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

更新绘制堆积的条形图和工具提示

最后，我通过调整fill属性来更新堆积条。我为你的主图和导航图改了它。

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

对于工具提示，我更新了Key和Total值：

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

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

D3JS在时间尺度上叠加了条形图

1 个答案: