从同一列的数据组创建多个图表
create multiple charts from data groups of the same column
如何制作这个仪表板
来自这个数据
time,group_name,value
15/10/2017 15:36:15,group-1,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:16,group-1,1
15/10/2017 15:36:16,group-3,1
15/10/2017 15:36:16,group-1,1
15/10/2017 15:36:16,group-3,1
15/10/2017 15:36:17,group-3,1
15/10/2017 15:36:17,group-3,1
15/10/2017 15:36:17,group-1,1
15/10/2017 15:36:17,group-2,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:18,group-2,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:19,group-3,1
15/10/2017 15:36:19,group-2,1
15/10/2017 15:36:19,group-2,1
15/10/2017 15:36:19,group-1,1
使用 dc.js?
提前致谢。
您可以先 dimensioning/grouping 按时间和组列执行此操作,然后使用假组将一个组分成多个。
我无权访问您的数据(提问时最好将您的数据粘贴为文本),因此我使用 dc.js 示例之一的数据创建了一个示例。数据如下所示:
Expt,Run,Speed
1,1,850
1,2,740
1,3,900
1,4,1070
1,5,930
1,6,850
...
2,1,960
2,2,940
2,3,960
2,4,940
2,5,880
2,6,800
有两个重要步骤。首先,我们需要创建一个维度和组,以 X 维度和要拆分的维度为键值。在这种情况下,我们希望 Run
为 X 维度,并且我们希望按 Expt
进行拆分。我们将 Run
放在第一位。分组正常
var runExptDim = cf.dimension(function(d) {
return [d.Run, d.Expt];
});
var runExptGroup = runExptDim.group().reduceSum(function(d) {
return d.Speed;
});
现在我们需要一个伪组来通过第二个密钥拆分原始组。这是一个函数,它允许我们为 Expt
:
的所有值构造假组
function split_group(group2d) {
return {
subgroup: function(key) {
return {
all: function() {
return group2d.all().filter(function(kv) {
return kv.key[1] === key;
}).map(function(kv) {
return {key: kv.key[0], value: kv.value};
}).sort(function(a, b) {
return a.key - b.key;
})
}
};
}
};
}
当调用子组的 .all()
方法时,它从原始组中提取数据,使用键的第二部分过滤数据,并使用 [=23= 删除键的第二部分].
最后它还必须对数据进行排序,因为多键往往会弄乱顺序,因为当您使用多键时,数据会转换为字符串进行排序。
像这样抓取子组:
var splitGroup = split_group(runExptGroup);
var runGroup1 = splitGroup.subgroup(1),
runGroup2 = splitGroup.subgroup(2),
runGroup3 = splitGroup.subgroup(3);
由于我们有一个奇怪的维度,所以不清楚要为图表指定什么维度。最简单的做法是在 X 轴上创建另一个维度:
var runDim = cf.dimension(function(d) {
return d.Run;
});
但是,这会导致图表自行过滤。稍后我可能会重新审视我的答案并更正此问题。
图表初始化如下所示:
var line1 = dc.lineChart('#line1')
.width(400).height(200)
.dimension(runExptGroup)
.group(runGroup1)
.x(d3.scale.linear())
.elasticX(true)
.elasticY(true);
这不涵盖您的样式需求,但您可以查看 sparkline example 以获得一些提示。
这是一个例子 fiddle:https://jsfiddle.net/gordonwoodhull/og68rkqz/
希望对您有所帮助!
编辑:在数字显示中显示总数
要显示每个拆分组的总和,您可以创建一个“假 groupAll”,它采用 value
s:
的总和
function total_group(group) {
return {
value: () => d3.sum(group.all(), kv => kv.value)
};
}
数字显示可以使用 .total()
方法的 groupAll 对象或常规组,在这种情况下它将找到 .all()
的最大值
奇怪的是,它在使用 groupAll 时需要标识值访问器。将它们放在一起:
var identity = x => x;
var number1 = dc.numberDisplay('#num1')
.valueAccessor(identity)
.group(total_group(runGroup1));
你的 fiddle 分支:https://jsfiddle.net/gordonwoodhull/aj1m9ysg/1/
如何制作这个仪表板
来自这个数据
time,group_name,value
15/10/2017 15:36:15,group-1,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:16,group-1,1
15/10/2017 15:36:16,group-3,1
15/10/2017 15:36:16,group-1,1
15/10/2017 15:36:16,group-3,1
15/10/2017 15:36:17,group-3,1
15/10/2017 15:36:17,group-3,1
15/10/2017 15:36:17,group-1,1
15/10/2017 15:36:17,group-2,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:18,group-2,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:19,group-3,1
15/10/2017 15:36:19,group-2,1
15/10/2017 15:36:19,group-2,1
15/10/2017 15:36:19,group-1,1
使用 dc.js?
提前致谢。
您可以先 dimensioning/grouping 按时间和组列执行此操作,然后使用假组将一个组分成多个。
我无权访问您的数据(提问时最好将您的数据粘贴为文本),因此我使用 dc.js 示例之一的数据创建了一个示例。数据如下所示:
Expt,Run,Speed
1,1,850
1,2,740
1,3,900
1,4,1070
1,5,930
1,6,850
...
2,1,960
2,2,940
2,3,960
2,4,940
2,5,880
2,6,800
有两个重要步骤。首先,我们需要创建一个维度和组,以 X 维度和要拆分的维度为键值。在这种情况下,我们希望 Run
为 X 维度,并且我们希望按 Expt
进行拆分。我们将 Run
放在第一位。分组正常
var runExptDim = cf.dimension(function(d) {
return [d.Run, d.Expt];
});
var runExptGroup = runExptDim.group().reduceSum(function(d) {
return d.Speed;
});
现在我们需要一个伪组来通过第二个密钥拆分原始组。这是一个函数,它允许我们为 Expt
:
function split_group(group2d) {
return {
subgroup: function(key) {
return {
all: function() {
return group2d.all().filter(function(kv) {
return kv.key[1] === key;
}).map(function(kv) {
return {key: kv.key[0], value: kv.value};
}).sort(function(a, b) {
return a.key - b.key;
})
}
};
}
};
}
当调用子组的 .all()
方法时,它从原始组中提取数据,使用键的第二部分过滤数据,并使用 [=23= 删除键的第二部分].
最后它还必须对数据进行排序,因为多键往往会弄乱顺序,因为当您使用多键时,数据会转换为字符串进行排序。
像这样抓取子组:
var splitGroup = split_group(runExptGroup);
var runGroup1 = splitGroup.subgroup(1),
runGroup2 = splitGroup.subgroup(2),
runGroup3 = splitGroup.subgroup(3);
由于我们有一个奇怪的维度,所以不清楚要为图表指定什么维度。最简单的做法是在 X 轴上创建另一个维度:
var runDim = cf.dimension(function(d) {
return d.Run;
});
但是,这会导致图表自行过滤。稍后我可能会重新审视我的答案并更正此问题。
图表初始化如下所示:
var line1 = dc.lineChart('#line1')
.width(400).height(200)
.dimension(runExptGroup)
.group(runGroup1)
.x(d3.scale.linear())
.elasticX(true)
.elasticY(true);
这不涵盖您的样式需求,但您可以查看 sparkline example 以获得一些提示。
这是一个例子 fiddle:https://jsfiddle.net/gordonwoodhull/og68rkqz/
希望对您有所帮助!
编辑:在数字显示中显示总数
要显示每个拆分组的总和,您可以创建一个“假 groupAll”,它采用 value
s:
function total_group(group) {
return {
value: () => d3.sum(group.all(), kv => kv.value)
};
}
数字显示可以使用 .total()
方法的 groupAll 对象或常规组,在这种情况下它将找到 .all()
奇怪的是,它在使用 groupAll 时需要标识值访问器。将它们放在一起:
var identity = x => x;
var number1 = dc.numberDisplay('#num1')
.valueAccessor(identity)
.group(total_group(runGroup1));
你的 fiddle 分支:https://jsfiddle.net/gordonwoodhull/aj1m9ysg/1/