Javascript dc.js-从单选按钮中选择减少功能

在过去的几周里，我在尝试创建一个简单的个人仪表板时，一直在使用dc.js

我成功地实现了一个弹出菜单，以选择我想要用于对线形图的时间维度进行分组的时间粒度，感谢社区的帮助，我成功地大幅提高了性能

现在，我尝试动态更改对分组数据执行的聚合类型（总和、平均值、模式、最小值和最大值）

我发现这非常有帮助，但是，尽管如此，我并没有完全适应我的情况，我也没有设法使它发挥作用。 根据我的理解，在这种情况下，我只需要更改值访问器函数，然后重新绘制。事实上，valueAccessor确定y轴像素的位置，因此这是它应该更改的唯一部分。 相反，当我处理组聚合中的更改时，我必须用新的分组重新设置整个图表

下面是我的代码，它导致在任何单选按钮位置（仅实现sum和svg）都不会打印任何内容

如果删除dynamic valueAccessor部分，默认的“总和”选择将正常工作

代码如下：

// Disable it or dash_reduceAvgAdd will give an error with ++p!
//'use strict';


// TODO temp dirty workaround
var selectedAggr = 'sum';


// ### Create Chart Objects
// Create chart objects associated with the container elements identified by the css selector.
// Note: It is often a good idea to have these objects accessible at the global scope so that they can be modified or
// filtered by other page controls.
var stackChart = dc.lineChart("#stack-chart");
var volumeChart = dc.barChart('#volume-chart');


// Asynchronously load the data and only when finished build the charts
queue()
    .defer(d3.json, "/data")
    .await(makeGraphs);


// Function to elaborate the data and build the charts
function makeGraphs(error, recordsJson) {

    // Clean data
    var records = recordsJson;

    // Works on d3-v4 only: var dateFormat = d3.timeFormat("%Y-%m-%d %H:%M:%S");
    //var dateFormat = d3.time.format("%Y-%m-%d %H:%M");
    console.log(Object.prototype.toString.call(records[0].date));

    // Coerce values to number and create javascript Date objects
    records.forEach(function(d) {
        d.date = new Date(+d.date);
        d.prodPow = +d.prodPow;
        d.consPow = +d.consPow;
    });


    // Crossfilter instance
    var ndx = crossfilter(records);


    // Aggregation functions
    // SUM mode
    //function reduceAdd(attr) { return reduceSum(function (d) { return d[attr]; }); }
    function dash_reduceSumAdd(attr) { return function (p, v) { return p + +v[attr]; }; }
    function dash_reduceSumSub(attr) { return function (p, v) { return p - v[attr]; }; }
    function dash_reduceInit() { return 0; }

    // AVG mode
    function dash_reduceAvgAdd(attr) {
        return function (p, v) {
            ++p.count;
            p.sum += v[attr];
            p.avg = p.sum/p.count;
            return p;
        };
    }
    function dash_reduceAvgSub(attr) {
        return function (p, v) {
            --p.count;
            p.sum -= v[attr];
            p.avg = p.count ? p.sum / p.count : 0;
            return p;
        }
    }
    function dash_reduceAvgInit() {
        return function () {
            return {count:0, sum:0, avg:0};
        }
    }
    function valAccSum(d) {
        return d.value;
    }
    function valAccAvg(d) {
        return d.value.avg;
    }


    // Map selector to correct map-reduce functions
    var aggregators = {
        sum: [dash_reduceSumAdd, dash_reduceSumSub, dash_reduceInit, valAccSum],
        avg: [dash_reduceAvgAdd, dash_reduceAvgSub, dash_reduceAvgInit, valAccAvg]//,
        //mode: reduceMode,
        //min: reduceMin,
        //max: reduceMax
    };


    // Granularities selectable values
    var granularities = {
        Hours: [d3.time.hour, d3.time.hours],
        Days: [d3.time.day, d3.time.days],
        Weeks: [d3.time.week, d3.time.weeks],
        Months: [d3.time.month, d3.time.months],
        Years: [d3.time.year, d3.time.years]
    };

    // Assign default granularity
    d3.select('#granularity').selectAll('option')
        .data(Object.keys(granularities))
        .enter().append('option')
        .text(function(d) { return d; })
        .attr('selected', function(d) { return d === 'Days' ? '' : null; });

    var dateDim, consPowByHour, prodPowByHour;

    // Function to build the charts from the selected granularity
    function setup(aggr) {
        if (dateDim) {
            dateDim.dispose();
            consPowByHour.dispose();
            prodPowByHour.dispose();
        }
        var gran = granularities[d3.select('#granularity')[0][0].value];
        dateDim = ndx.dimension(function (d) { return gran[0](d.date); });
        consPowByHour =
            dateDim
                .group(function (d) { return gran[0](d); })
                .reduce(aggregators[aggr][0]('consPow'), aggregators[aggr][1]('consPow'), aggregators[aggr][2]);
        //consPowByHour = dateDim.group(function (d) { return granularity[0](d); }).reduceSum();
        prodPowByHour =
            dateDim
                .group(function (d) { return gran[0](d); })
                .reduce(aggregators[aggr][0]('prodPow'), aggregators[aggr][1]('prodPow'), aggregators[aggr][2]);

        // Min and max dates to be used in the charts
        var minDate = gran[0](dateDim.bottom(1)[0]["date"]);
        var maxDate = gran[0](dateDim.top(1)[0]["date"]);

        // Charts customization
        stackChart
            .renderArea(true)
            /* Make the chart as big as the bootstrap grid by not setting ".width(960)" */
            .height(350)
            .transitionDuration(1500)
            .margins({top: 30, right: 50, bottom: 25, left: 40})
            .dimension(dateDim)
            /* Grouped data to represent and label to use in the legend */
            .group(consPowByHour, "Consumed Power [kW]")
            /* Function to access grouped-data values in the chart */
            .valueAccessor(aggregators[aggr][2])
            /* x-axis range */
            .x(d3.time.scale().domain([minDate, maxDate]))
            .xUnits(gran[1])
            /* Auto-adjust axis */
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .legend(dc.legend().x(80).y(0).itemHeight(13).gap(5))
            /* When on, you can't visualize values, when off you can filter data */
            .brushOn(false)
            /* Add another line to the chart; pass (i) group, (ii) legend label and (iii) value accessor */
            .stack(prodPowByHour, "Produced Power [kW]", aggregators[aggr][2])
            /* Range chart to link the brush extent of the range with the zoom focus of the current chart. */
            .rangeChart(volumeChart)
            /* dc.js bug, this should be true by default to turn on visibility for reset class */
            .controlsUseVisibility(true)
        ;

        volumeChart//.width(990)
            .height(60)
            .margins({top: 0, right: 50, bottom: 20, left: 40})
            .dimension(dateDim)
            .group(consPowByHour)
            .centerBar(true)
            .gap(1)
            .x(d3.time.scale().domain([minDate, maxDate]))
            .xUnits(gran[1])
            .elasticY(true)
            .alwaysUseRounding(true)
            /* dc.js bug, this avoids the reset and filter to remain after resetting using the brush/focus */
            .on('renderlet', function (chart) {
                var rangeFilter = chart.filter();
                var focusFilter = chart.focusChart().filter();
                if (focusFilter && !rangeFilter) {
                    dc.events.trigger(function () {
                        chart.focusChart().replaceFilter(rangeFilter);
                    });
                }
            })
        ;
    }

    // First time build charts
    setup(selectedAggr);

    // Render all graphs
    dc.renderAll();

    // Listen for changes on granularities selection
    d3.select('#granularity').on('change', function() {
        setup(selectedAggr);
        dc.redrawAll();
    });

    // Listen for changes on aggregation mode selection
    d3.selectAll('#select-operation input')
        .on('click', function() {
            stackChart.valueAccessor(aggregators[this.value][3]);
            selectedAggr = this.value;
            //setup(this.value);
            dc.redrawAll();
        });

这里有几个屏幕截图，显示了它在工作和不工作时的样子。

提前感谢，我真的不知道如何前进，因为我甚至没有从控制台得到任何错误

编辑： 以下是我的html代码：

<!DOCTYPE html>
<html>

<head>
    <title>Dashboard</title>
    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
    <link rel="stylesheet" href="./static/css/dc.css">
    <link rel="stylesheet" href="./static/css/custom.css">
</head>


<body class="application">

<!-- Header bar on top -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="./">Dashboard</a>
        </div>
    </div>
</div>

<!-- Chart container page  -->
<div class="container-fluid">

    <!-- First row of charts (compensate on the left part the strange padding on right "trbl") -->
    <div class="row" style="width:100%; padding: 0px 0px 0px 25px;">

        <!-- Control Panel -->
        <div class="col-sm-12">
            <div class="chart-wrapper control-panel">
                <div class="chart-title control-panel">
                    Control Panel
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="chart-stage control-panel" style="height: 100px; border-right: 1px solid #e2e2e2;">
                            <div class="text-center" style="padding: 10px;">
                            <!--<div class="inner">-->
                                <strong>Granularity:</strong>
                                <select id="granularity" style="margin-left: 10px"></select>
                                <div id="select-operation" style="margin-top: 15px;">
                                    <strong>Aggregation:</strong>
                                    <label><input type=radio name="operation" value="sum" checked="checked" style="margin-left: 10px">&nbsp;sum</label>
                                    <label><input type=radio name="operation" value="avg">&nbsp;average</label>
                                    <label><input type=radio name="operation" value="mode">&nbsp;mode</label>
                                    <label><input type=radio name="operation" value="min">&nbsp;min</label>
                                    <label><input type=radio name="operation" value="max">&nbsp;max</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="chart-stage control-panel" style="height: 100px; border-right: 1px solid #e2e2e2;">
                            Test
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="chart-stage control-panel" style="height: 100px;">
                            Test
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stack Chart and its Range Chart as a single bootstrap grid -->
        <div class="col-sm-12">
            <div class="chart-wrapper">
                <div class="chart-title">
                    Stack Chart
                </div>
                <div class="chart-stage">
                    <!-- Stack Chart -->
                    <div class="row">
                          <div id="stack-chart" style="width:100%;">
                              <a class="reset"
                                 href="javascript:stackChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
                                 style="visibility: hidden; float: right; margin-right: 15px;">
                                  reset chart
                              </a>
                              <span class='reset'
                                    style='visibility: hidden; float: right; margin-right: 15px; font-style: italic;'>
                                  Current filter: <span class='filter'></span>
                              </span>
                              <div class="clearfix"></div> <!-- Use it when using the reset class for IE -->
                          </div>
                    </div>
                    <!-- Range Chart -->
                    <div class="row">
                        <div id="volume-chart" style="width:100%;"></div>
                        <p class="muted pull-right" style="margin-right: 15px;"><i>select a time range to zoom in</i></p>
                    </div>
                </div>
            </div>
        </div> <!-- End of "col-sm-12" grid -->

    </div> <!-- End of first row -->

</div>
</body>
</html>

仪表板
控制面板
粒度：
聚合：
总和
平均的
模式
闵
最大值
试验
试验
堆栈图
当前筛选器：
选择要放大的时间范围

我设法解决了reduce函数的主要问题

解决方案是只使用这些reduce函数：

// Custom reduce functions
function dash_reduceAdd(p, v) {
    ++p.count;
    p.conSum += v.consPow;
    p.prodSum += v.prodPow;
    p.consAvg = p.conSum/p.count;
    p.prodAvg = p.prodSum/p.count;
    return p;
}
function dash_reduceSub(p, v) {
    --p.count;
    p.conSum -= v.consPow;
    p.prodSum -= v.prodPow;
    p.consAvg = p.count ? p.conSum / p.count : 0;
    p.prodAvg = p.count ? p.prodSum / p.count : 0;
    return p;
}
function dash_reduceInit() {
    return { count:0, conSum:0, prodSum:0, consAvg:0, prodAvg:0 };
}

为“stackChart”和“volumeChart”使用唯一的分组维度。像这样：

powByTime =
        dateDim
            .group(function (d) { return gran[0](d); })
            .reduce(dash_reduceAdd, dash_reduceSub, dash_reduceInit);

stackChart.valueAccessor(function(d) { return d.value.conSum; });

// Map the selected mode to the correct valueAccessor value
var accessors = {
    sum: {consPow: 'conSum', prodPow: 'prodSum'},
    avg: {consPow: 'consAvg', prodPow: 'prodAvg'}
};

// Listen for changes on the aggregation mode and update the valueAccessor
d3.selectAll('#select-operation input')
    .on('click', function() {
        var aggrMode = this.value;
        stackChart.valueAccessor(function(d) { var sel = accessors[aggrMode]['consPow']; return d.value[sel]; });
        dc.redrawAll();
    });

在stackChart的“建筑物”内，消费和生产的价值存取器如下所示：

powByTime =
        dateDim
            .group(function (d) { return gran[0](d); })
            .reduce(dash_reduceAdd, dash_reduceSub, dash_reduceInit);

stackChart.valueAccessor(function(d) { return d.value.conSum; });

// Map the selected mode to the correct valueAccessor value
var accessors = {
    sum: {consPow: 'conSum', prodPow: 'prodSum'},
    avg: {consPow: 'consAvg', prodPow: 'prodAvg'}
};

// Listen for changes on the aggregation mode and update the valueAccessor
d3.selectAll('#select-operation input')
    .on('click', function() {
        var aggrMode = this.value;
        stackChart.valueAccessor(function(d) { var sel = accessors[aggrMode]['consPow']; return d.value[sel]; });
        dc.redrawAll();
    });

这是：

stackChart.stack(powByTime, "Produced Power [kW]", function(d) { return d.value.prodSum; })

最后，在valueAccessor中选择如下：

powByTime =
        dateDim
            .group(function (d) { return gran[0](d); })
            .reduce(dash_reduceAdd, dash_reduceSub, dash_reduceInit);

stackChart.valueAccessor(function(d) { return d.value.conSum; });

// Map the selected mode to the correct valueAccessor value
var accessors = {
    sum: {consPow: 'conSum', prodPow: 'prodSum'},
    avg: {consPow: 'consAvg', prodPow: 'prodAvg'}
};

// Listen for changes on the aggregation mode and update the valueAccessor
d3.selectAll('#select-operation input')
    .on('click', function() {
        var aggrMode = this.value;
        stackChart.valueAccessor(function(d) { var sel = accessors[aggrMode]['consPow']; return d.value[sel]; });
        dc.redrawAll();
    });

现在这对我所问的问题有效，但如果您正在重用它（这就是我发布解决方案的原因），请注意，这会带来其他问题：

• 我无法访问/修改“.stack”层的值访问器…到目前为止，我只添加了新层
• 将鼠标悬停在图表中的某个点上时，“消耗”（基本层）的值正确，但生产（堆叠层）的值错误（它显示“消耗功率”的值）

---

我还没有弄清楚如何解决它们，我会打开另一个线程以备万一，或者在将来发布完整的解决方案，如果我成功的话。希望这能帮助其他人。

好的，我想我找到了我的主要问题，我将很快发布解决方案。简言之，reduce函数（add、sub、init）可以封装我在执行group（）.reduce（）时要计算的所有值，因此我可以对每个值使用一个函数来计算avg和sum…然后在valueAccessor中，我只需要指定我想要的值（p.value.avg或p.value.sum）。现在看起来很简单…为了完整起见，我通过为图表定义一个完整的标题函数来克服鼠标悬停的问题，如下所示：

var dateFormat=d3.time.format（“%a%d-%m-%Y%H:%m”）；函数名（p）{return'日期：'+dateFormat（p.key）+'\n'+'消耗：'+p.value.conSum+'\n'+'消耗（avg）：'+p.value.consAvg+'\n'+'产生：'+p.value.prodSum+'\n'+'产生（avg）：'+p.value.prodAvg；}

。我认为问题在于悬停对两个层使用相同的“p.value”。对于任何关注这一点的人，下面是Bertone的后续问题：