dc.js Scatter Plot具有单个键的多个值

Question

我们的仪表板上的散点图非常好，但我们已经抛出一个曲线球。我们有一个新的数据集，为单个键提供多个y值。我们有其他数据集，但我们先将数据展平，但我们不想展平这个数据集。

散点图应该是x轴的uid和y轴值的inj字段中的每个值。 inj字段将始终是一个数字数组，但每行可以在数组中有1 .. n个值。

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字段中的第一个值。

var ndx   = crossfilter(data);
var spDim = ndx.dimension(function(d){ return [d.uid, d.actions.inj[0]];});
var spGrp = spDim.group();

但有没有关于如何定义散点图以处理每个x值的多个y值的建议？

这是一个jsfiddle示例，显示了如何显示第一个元素或最后一个元素。但是如何显示数组的所有元素？

- - 附加信息 - -

以上只是演示要求的一个简单示例。我们开发了一个完全数据驱动的动态数据浏览器。目前使用的数据集受到保护。我们将很快添加一个公共数据集来展示各种功能。下面是几张图片。

我隐藏了一些传说。对于Scatter Plot，我们添加了一个垂直画笔，在按下“Selection”按钮时启用。使用整体数据集统计信息在散点图图表初始化中填充注释部分。然后，当执行任何过滤器时，将使用仅过滤数据的统计信息更新注释部分。

字段选择树显示所选数据集的元数据。用户可以决定将哪些字段显示为图表和数据表（未显示）。目前，对于显示的数据集，我们只有89个可用字段，但对于另一个数据集，用户可以混合和匹配530个字段。

我没有在图表DIV下面显示各种标签，这些标签包含几个带有实际数据的数据表。

元数据有几个字段，这些字段被定义为帮助使用动态构建资源管理器仪表板。

Answer 1

我警告过你，代码不会很漂亮！如果你可以展平你的数据，你可能会更高兴，但是可以使这项工作成功。

我们可以首先汇总每个inj中的所有uids，通过数据中的行过滤并通过uid汇总。在减少中，我们计算每个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: {}};
            }
        );
        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确实只有一行数据，你可能会做一些更简单的事情。

为了展平得到的组，我们可以使用"fake group"为每个{key, value}对创建一个类似于[uid, inj]的数据项：

    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');

Fork of your fiddle

在小提琴中，我添加了一个条形图来演示UID过滤。条形图上的过滤有效，但对散点图进行过滤则不起作用。如果您需要在散点图上进行过滤，那么可能会修复，但它只能在uid维度上进行过滤，因为您的数据太过于无法通过inj进行过滤。