【问题标题】:dc.js: How can I calculate averages from reduced sub-bins?dc.js:如何从减少的子箱中计算平均值?
【发布时间】:2017-03-30 02:52:41
【问题描述】:

我有来自虚拟机集群的信息,我试图在 dc.js 复合折线图上按天绘制这些信息。

这是 JSON 格式:

[{
Date: "Feb 15 14:25:53 2017",
Institution: "institution x",
Memory: 57777556,
Nodes: 1,
Processors: 4,
Queue: "workq",
TotalCpus: 81600,
TotalMemory: 64172851200,
TotalNodes: 300
},
{
Date: "Feb 15 14:26:09 2017",
Institution: "institution y",
Memory: 57542224,
Nodes: 1,
Processors: 4,
Queue: "workq",
TotalCpus: 81600,
TotalMemory: 64172851200,
TotalNodes: 300
}]

通过使用 reduceSum() 减少,我可以绘制每个机构随时间消耗的总内存。这是我的小提琴:https://jsfiddle.net/catkinso/cxr1L6fq/

但是,我无法弄清楚如何计算每个机构每天消耗的平均内存。

我知道我需要实现一个自定义缩减,它使用这样的子箱:

var usedMemoryGroup = dateDimension.group().reduce(
function (p, v) 
{ 
    // add
    if (v.Queue === queue)
    {
        p[v.Institution] = (p[v.Institution] || 0) + (v.Memory / v.TotalMemory);
    }
    return p;
},
function (p, v) 
{ 
    // remove
    if (v.Queue === queue)
    {
        p[v.Institution] -= (v.Memory / v.TotalMemory);
    }
    return p;
},
function () 
{ 
// init
    return {};
});

但我不确定如何创建自定义减少,以创建子箱,同时还计算每天的平均值。最终,我希望将这种减少绘制在一张综合时间表上,其中包含每个机构的线条。

任何帮助将不胜感激!

【问题讨论】:

  • 我建议不要分组计算平均值。计算分子和分母。然后在要显示数据时计算平均值。我认为您的问题更多在于您一遍又一遍地在同一组中调用reduceSum。您只是每次都更换组的减速器。您需要为每个机构创建一个组,然后使用此技术将它们组合起来:github.com/dc-js/dc.js/wiki/FAQ#combine-groups(您还可以跟踪一个组的单独属性的每个平均值。无论哪种方式都有效。)
  • 谢谢伊桑!您的评论帮助指导我朝着更好的方向前进!这是一个更新的小提琴:jsfiddle.net/catkinso/475nysw8/5

标签: javascript d3.js dc.js


【解决方案1】:

对于任何感兴趣的人,这就是我所做的......

为机构名称创建维度:

institutionDimension = ndx.dimension(function (d) {
                                    if (d.Queue === queue) {
                                        return d.Institution;
                                    }
                                })

然后创建一个包含所有机构名称的数组:

 var institutions = [];
 var names = institutionDimension.group().all();

 names.forEach(function (x) {
      if (institutions.indexOf(x.key) === -1) {
           institutions.push(x.key);
       }
 });

 institutions.sort();

然后为每个机构创建一个组:

var institutionGroups = [];
institutions.forEach(function (institution) 
{
     institutionGroups.push(createAverageMemoryGroup(dateDimension,queue,institution));
});

function createAverageMemoryGroup(dimension, queue, institution)
{
    var group = dimension.group()
        .reduce(
            function (p, v) {
                if (v.Queue === queue && v.Institution === institution) {
                    ++p.count;
                    p.queue = queue;
                    p.aggregateMemory += v.Memory/1000000;
                    p.averageMemoryUsed = p.count ? d3.round((p.aggregateMemory / p.count), 2) : 0;
                }
                return p;
            },
            function (p, v) {
                if (v.Queue === queue && v.Institution === institution) {
                    --p.count;
                    p.aggregateMemory -= v.Memory/1000000;
                    p.averageMemoryUsed = p.count ? d3.round((p.aggregateMemory / p.count), 2) : 0;
                }
                return p;
            },
            function () {
                return {
                    count: 0,
                    aggregateMemory: 0,
                    averageMemoryUsed: 0,
                    queue
                };
            });

    return group;
}

然后为每个组创建一个组合:

var composition = createComposition(usedMemoryTimeChart, dateDimension, institutionGroups, institutions);    
function createComposition(chart, dimension, groups, institutions)
    {
        var composition = [];
        for (var i = 0; i < institutions.length; i++) {
            composition.push(
                dc.lineChart(chart)
                .dimension(dimension)
                .colors(getColor(i))
                .group(groups[i], institutions[i])
                .dashStyle([2, 2])
                .valueAccessor(function (x) {
                    return x.value.averageMemoryUsed;
                })
                );
        }

        return composition;
    }

最后,将合成应用于图表:

usedMemoryTimeChart.compose(composition);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-12-28
    • 2015-05-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多