dc.js:如何从减少的子区域计算平均值?

时间:2017-03-30 02:52:41

标签: javascript d3.js dc.js

我有一组虚拟机的信息,我试图在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 {};
});

但我不确定如何创建自定义缩小,创建子容器,同时计算每天的平均值。最终,我希望在复合时间表中用每个机构的线条来描绘这种减少。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分: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);

enter image description here