dc.js散点图，单个键具有多个值 [英] dc.js Scatter Plot with multiple values for a single key
问题描述
在我们的仪表板中，散点图的工作效果很好，但是我们被扔了一个曲线球.我们有一个新的数据集，可为单个键提供多个y值.在发生这种情况时，我们还有其他数据集，但是我们首先将数据展平，但是我们不想展平该数据集.
We have scatter plots working great in our dashboard, but we have been thrown a curve ball. We have a new dataset that provides multiple y values for a single key. We have other datasets were this occurs but we had flatten the data first, but we do not want to flatten this dataset.
散点图应将uid用于x轴，将inj字段中的每个值用于y轴值. inj字段始终是一个数字数组，但每一行在数组中可以有1 .. n个值.
The scatter plot should us the uid for the x-axis and each value in the inj field for the y-axis values. The inj field will always be an array of numbers, but each row could have 1 .. n values in the array.
var data = [
{"uid":1, "actions": {"inj":[2,4,10], "img":[10,15,25], "res":[15,19,37]},
{"uid":2, "actions": {"inj":[5,8,15], "img":[5,8,12], "res":[33, 45,57]}
{"uid":3, "actions": {"inj":[9], "img":[2], "res":[29]}
];
我们可以定义尺寸和组以绘制inj字段中的第一个值.
We can define the dimension and group to plot the first value from the inj field.
var ndx = crossfilter(data);
var spDim = ndx.dimension(function(d){ return [d.uid, d.actions.inj[0]];});
var spGrp = spDim.group();
但是对于如何定义散点图以处理每个x值的多个y值有什么建议吗?
But are there any suggestions on how to define the scatter plot to handle multiple y values for each x value?
这是一个 jsfiddle 示例，显示了如何显示第一个元素或最后一个元素.但是如何显示数组的所有元素?
Here is a jsfiddle example showing how I can display the first element or the last element. But how can I show all elements of the array?
---其他信息---
以上只是一个简单的示例，用于演示需求.我们开发了一个完全由数据驱动的动态数据浏览器.当前正在使用的数据集受到保护.我们将很快添加一个公共数据集，以展示各种功能.以下是几张图片.
Above is just a simple example to demonstrate a requirement. We have developed a dynamic data explorer that is fully data driven. Currently the datasets being used are protected. We will be adding a public dataset soon to show off the various features. Below are a couple of images.
我隐藏了一些传说.对于散点图，我们添加了仅在按下选择"按钮时启用的垂直笔刷.在散点图初始化中使用整体数据集统计信息填充注释"部分.然后，当执行任何过滤器时，notes部分将仅更新过滤数据的统计信息.
I have hidden some legends. For the Scatter Plot we added a vertical only brush that is enabled when pressing the "Selection" button. The notes section is populated on scatter plot chart initialization with the overall dataset statistics. Then when any filter is performed the notes section is updated with statistics of just the filtered data.
字段选择树显示所选数据集的元数据.用户可以决定将哪些字段显示为图表和数据表(未显示).目前，对于显示的数据集，我们只有89个可用字段，但是对于另一个数据集，有530个字段可供用户混合和匹配.
The field selection tree displays the metadata for the selected dataset. The user can decide which fields to show as charts and in datatables (not shown). Currently for the dataset shown we only have 89 available fields, but for another dataset there are 530 fields the user can mix and match.
我没有在图表DIV下方显示各种选项卡，这些选项卡包含几个带有实际数据的数据表.
I have not shown the various tabs below the charts DIV that hold several datatables with the actual data.
元数据具有几个字段，这些字段被定义为帮助动态使用资源管理器仪表板.
The metadata has several fields that are defined to help use dynamically build the explorer dashboard.
推荐答案
我警告过您，代码将不会很漂亮！如果可以展平数据，您可能会更开心，但是有可能使这项工作变得可行.
I warned you the code would not be pretty! You will probably be happier if you can flatten your data, but it's possible to make this work.
我们可以首先对每个uid中的所有inj进行汇总，方法是按数据中的行过滤并按uid进行汇总.在归约中，我们计算每个inj值的实例:
We can first aggregate all the injs within each uid, by filtering by the rows in the data and aggregating by uid. In the reduction we count the instances of each inj value:
uidDimension = ndx.dimension(function (d) {
return +d.uid;
}),
uidGroup = uidDimension.group().reduce(
function(p, v) { // add
v.actions.inj.forEach(function(i) {
p.inj[i] = (p.inj[i] || 0) + 1;
});
return p;
},
function(p, v) { // remove
v.actions.inj.forEach(function(i) {
p.inj[i] = p.inj[i] - 1;
if(!p.inj[i])
delete p.inj[i];
});
return p;
},
function() { // init
return {inj: {}};
}
);
uidDimension = ndx.dimension(function (d) {
return +d.uid;
}),
uidGroup = uidDimension.group().reduce(
function(p, v) { // add
v.actions.inj.forEach(function(i) {
p.inj[i] = (p.inj[i] || 0) + 1;
});
return p;
},
function(p, v) { // remove
v.actions.inj.forEach(function(i) {
p.inj[i] = p.inj[i] - 1;
if(!p.inj[i])
delete p.inj[i];
});
return p;
},
function() { // init
return {inj: {}};
}
);
这里，我们假设可能存在具有相同的uid和不同的inj数组的数据行.这比示例数据所需要的更为通用:如果每个uid确实只有一行数据，则可以做一些简单的事情.
Here we assume that there might be rows of data with the same uid and different inj arrays. This is more general than needed for your sample data: you could probably do something simpler if there is indeed only one row of data for each uid.
要弄平结果组，可以使用假组" 为每个[uid, inj]对创建一个类似组的{key, value}数据项:
To flatten out the resulting group, with we can use a "fake group" to create one group-like {key, value} data item for each [uid, inj] pair:
function flatten_group(group, field) {
return {
all: function() {
var ret = [];
group.all().forEach(function(kv) {
Object.keys(kv.value[field]).forEach(function(i) {
ret.push({
key: [kv.key, +i],
value: kv.value[field][i]
});
})
});
return ret;
}
}
}
var uidinjGroup = flatten_group(uidGroup, 'inj');
在小提琴中，我添加了一个条形图以演示按UID进行过滤.条形图上的过滤有效，但散点图上的过滤无效.如果您需要根据散点图进行过滤，则可以将其固定，但只能对uid维度进行过滤，因为您的数据过于粗暴，无法按inj进行过滤.
In the fiddle, I've added a bar chart to demonstrate filtering by UID. Filtering on the bar chart works, but filtering on the scatter plot does not. If you need to filter on the scatter plot, that could probably be fixed, but it could only filter on the uid dimension because your data is too course to allow filtering by inj.
这篇关于dc.js散点图，单个键具有多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
