使用reduce回调方法进行组归约的复合图中的dc折线图

时间:2018-10-19 16:56:38

标签: d3.js dc.js linechart composition

我想制作一个包含未知数量林卡图的合成图表,这些图都基于相同维度,但是每个图都有回调减少函数来计算计数,求和和平均值,但是对于给定的字段值,每个过滤数据尺寸。

我不知道如何使它工作。出现图形坐标和图例,但未画线。

这是我目前正在做的事情:

var tablaCount = dc.dataCount("#dataCount");
var tablaDatos = dc.dataTable("#tabla");

var ofs = 0, pag = 10, ndxSize = 0;
var ndx, all;
d3.json("/PruebaConcepto/json/userdashboard-vgodoy-pruebax_20181023111343.json").then(function(data) {
    ndx = crossfilter(data);
    ndxSize = ndx.size();
    all = ndx.groupAll();

    var compositeChartline1 = dc.compositeChart("#lineChartline1");
    var dimensionline1 = ndx.dimension(function(d) { return [d.horasacta, d.aerodromo] ; });
    var groupline1 = dimensionline1.group().reduce(
    function (p, v) {
        ++p.count;
        p.pct = (p.count / ndxSize) * 100;
        p.sum += ("viento_int_viento" != "kpigroup" ? (v.viento_int_viento ? v.viento_int_viento : 0) : 0);
        p.avg = ((p.sum ? p.sum : 0) / p.count);
        return p;
    },
    function (p, v) {
        --p.count;
        p.pct = (p.count / ndxSize) * 100;
        p.sum -= ("viento_int_viento" != "kpigroup" ? (v.viento_int_viento ? v.viento_int_viento : 0) : 0);
        p.avg = ((p.sum ? p.sum : 0) / p.count);
        return p;
    },
    function () {
        return {count: 0, pct: 0, sum: 0, avg: 0};
    }
    );

    var keysline1 = groupline1.all().filter(function(d) {return d.key[0]});
    var seriesline1 = [];
    var tmpseriesline1 = [];
    for (var i = 0; i < keysline1.length; i++) {
        tmpseriesline1.push(keysline1[i].key[1]);
    }
    seriesline1 = (tmpseriesline1.filter(function(item, pos) { return tmpseriesline1.indexOf(item) == pos;})).slice();
    tmpseriesline1 = 0;

    var yMaxline1 = 0;
    for (var i = 0; i < groupline1.size() && !(groupline1.top(Infinity)[i] == null); i++) {
        if (yMaxline1 < groupline1.top(Infinity)[i].value.avg) {
        yMaxline1 = groupline1.top(Infinity)[i].value.avg;
        }
    }
    var yMagline1 = Math.pow(10, Math.floor((Math.log(yMaxline1) / Math.LN10 + 0.000000001))) / 10;
    yMaxline1 = Math.ceil(yMaxline1 + yMagline1);

    var xRangeline1 = [];
    var tmpxRangeline1 = [];
    for (var i = 0; i < keysline1.length; i++) {
        tmpxRangeline1.push(keysline1[i].key[0]);
    }
    xRangeline1 = tmpxRangeline1.filter(function(item, pos) { return tmpxRangeline1.indexOf(item) == pos;});
    tmpxRangeline1 = 0;

    var color = ["red", "green", "yellow"];
    var groupsline1 = [seriesline1.length];
    var lineChartsline1 = [seriesline1.length];
    for (var i = 0; i < seriesline1.length; i++) {
    var tmpSeriesline1 = seriesline1[i]
    var tmpGroupline1 = dimensionline1.group().reduce(
                                    function (p, v) {
                                        ++p.count;
                                        p.pct = (p.count / ndxSize) * 100;
                                        p.sum += ("viento_int_viento" != "kpigroup" ? (v.viento_int_viento ? v.viento_int_viento : 0) : 0);
                                        p.avg = ((p.sum ? p.sum : 0) / p.count);
                                        return p;
                                    },
                                    function (p, v) {
                                        --p.count;
                                        p.pct = (p.count / ndxSize) * 100;
                                        p.sum -= ("viento_int_viento" != "kpigroup" ? (v.viento_int_viento ? v.viento_int_viento : 0) : 0);
                                        p.avg = ((p.sum ? p.sum : 0) / p.count);
                                        return p;
                                    },
                                    function () {
                                        return {count: 0, pct: 0, sum: 0, avg: 0};
                                    }
                                );

    groupsline1[i] = tmpGroupline1.all().filter(function(d) { return d.key[1] == tmpSeriesline1; });

    lineChartsline1[i] = dc.lineChart(compositeChartline1)
                                .group(groupsline1[i], seriesline1[i])
                                .valueAccessor(function(d) { 
                                    return parseFloat(d.value.avg); 
                                })
                                .title(function(d) {
                                    var s = [];
                                    s.push(d.key[1] + ":");
                                    s.push("Conteo: " + (isNaN(d.value.count) ? "-" : d.value.count + " (" + d.value.pct.toFixed(2) + "%)"));
                                    if ("avg" != "count") {
                                        s.push("Media: " + (isNaN(d.value.avg) ? "-" : d.value.avg.toFixed(2) + ("avg" != "pct" ? "" : "%")));
                                    }
                                    return s.join("\n");
                                })
                                .colors(color[i])
                                .dashStyle([5,5]);
    }

    compositeChartline1
    .width(500).height(500)
    .margins({top: 60, right: 60, bottom: 120, left: 120})
    .x(d3.scaleOrdinal().domain(xRangeline1))
    .xUnits(dc.units.ordinal)
    .y(d3.scaleLinear().domain([0, yMaxline1]).range([500,0]))
    .xAxisLabel("X")
    .yAxisLabel("Y")
    .legend(dc.legend().x(40).y(20).itemHeight(seriesline1.length).gap(10))
    .dimension(dimensionline1)
    .renderHorizontalGridLines(true)
    .brushOn(false)
    .elasticY(true)
    .renderlet(function (chart) { 
    chart.selectAll('g.x text').attr('transform', 'translate(-30,30) rotate(315)'); 
    })
    .compose(lineChartsline1);
}

谢谢。

0 个答案:

没有答案