Question

我正在尝试使用仪表板来显示基本数据。

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

我主要有两张图表：

一个名为＆＃34; stackChart＆＃34;的lineChart;那
- 使用valueAccessor函数
- 将生产显示为具有值Accessor功能的堆叠层
barChart称为＆＃34; volumeChart＆＃34;这只是lineChart的rangeChart

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

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

刷新基础层（消耗）。

我无法做的是刷新＆＃34;堆叠层＆＃34;通过更新其valueAccessor！我无法找到任何方法来访问其valueAccessor（或者，最坏的情况是，只需完全删除堆叠层，然后使用＆＃34; .stack（...）＆＃34;添加新刷新的堆叠层。）。

以下是构建图表的代码的相应部分：

// 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，但是一旦设置了访问器，你可能无法更改它。尝试为您的访问者编写一个函数，它将返回总和或平均值，具体取决于您可以设置的某个变量的状态。

Answer 2

@ Ryan的解决方案可能会正常工作（可能是更好的设计），但这里是关于堆叠的dc.js API的缩减，以备不时之需。

如中所述，组和堆栈API非常奇怪。它以向后兼容的方式有机地增长，因此堆栈顶部的堆栈和值访问器在一个美丽的分形中分支出来......好吧，没有它非常混乱。

但问题也提出了解决问题的方法。由于stackChart.group(powByTime, "Consumption") // this resets the stacks .valueAccessor(function(d) { var sel = accessors[aggrMode]['consPow']; return d.value[sel]; }) .stack(powByTime, "Production", function(d) { var sel = accessors[aggrMode]['prodPow']; return d.value[sel]; });重置了堆栈集，所以请继续在事件处理程序中从头开始构建它们：

<textarea name="intro[en]"></textarea>
<textarea name="intro[fr]"></textarea>
<textarea name="intro[de]"></textarea>

在内部，它只是清空一个层/堆栈数组，然后用一些引用填充它。

这非常有效，因为dc.js不会存储您的数据，除非它绑定到DOM元素。因此，使用旧组和值访问器重绘是相同的工作量，而不是使用新的重绘。

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

2 个答案: