d3.js - dc.js - 动态更改折线图中堆叠层的 valueAccessor 并重绘它

Question

我正在尝试实现一个仪表板来显示基本数据。

我实际上完全陷入了一个问题。奇怪的是，我在网上找不到任何类似的东西，所以我没有太多关于如何继续前进的线索。

我主要有两个图表:

• 一个名为“stackChart”的折线图
  • 使用 valueAccessor 函数将消费显示为基础层
  • 将生产显示为堆叠层及其值访问器函数
• 一个名为“volumeChart”的条形图，它只是折线图的 rangeChart

我使用单选按钮选择是按总和还是按平均值聚合分组数据(使用与此 example 相同的方法)，然后我只需使用:

stackChart.valueAccessor(/*function with new value (avg or sum)*/);
dc.redrawAll();

刷新基础层(消耗)。

我无法通过更新其 valueAccessor 来刷新“堆叠层”!我找不到任何方法来访问它的 valueAccessor (或者，最坏的情况，只是完全删除堆叠层，然后仅使用“.stack(...)”添加一个新的刷新的堆叠层)。

这是我的代码中构建图表的相应部分:

// Charts customization #js
        stackChart
            .renderArea(true)
            .height(350)
            .transitionDuration(1500)
            .dimension(dateDim)
            .group(powByTime, "Consumption")
            // BASE LAYER valueAccessor HERE
            .valueAccessor(function(d) { return d.value.conSum; })
            .x(d3.time.scale().domain([minDate, maxDate]))
            .xUnits(d3.time.days)
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .legend(dc.legend().x(80).y(0).itemHeight(13).gap(5))
            .brushOn(false)
            // STACKED LAYER HERE
            .stack(powByTime, "Production", function(d) { return d.value.prodSum; })
            .rangeChart(volumeChart)
            .controlsUseVisibility(true)
        ;

这里是我查找单选按钮中的更改并重新绘制图层的位置:

// Listen for changes
d3.selectAll('#select-operation input')
    .on('click', function() {
        var aggrMode = this.value;  // fetch "avg" or "sum" from buttons
        // UPDATE BASE LAYER HERE:
        stackChart.valueAccessor(function(d) { var sel = accessors[aggrMode]['consPow']; return d.value[sel]; });
        // ???HOW TO UPDATE STACKED LAYER valueAccessor function???
        //stackChart.stack.valueAccessor(function(d) { var sel = accessors[aggrMode]['prodPow']; return d.value[sel]; });
        dc.redrawAll();
    });

如果您需要有关我正在尝试执行的操作的更多详细信息以及完整代码，您可以查看 here .

作为引用，它是这样的:

Answer 1

我不太了解 dc.js，但是一旦设置了访问器，您可能就无法更改它了。尝试为您的访问器编写一个函数，该函数将返回总和或平均值，具体取决于您可以设置的某些变量的状态。