Question

我试图在dc.js中进行实时（每2秒更新一次）复合折线图。我的实际图表按预期工作，但我对图例有问题。我设置的方式是使用一些初始数据创建图表，如下所示：

        var cf = crossfilter(data);
        var minutes = cf.dimension(function(d){return d.negMinutes});
        var goodGroup = minutes.group().reduceSum(function(d){
            return d.numStreamsGood;
        });
        var fairGroup = minutes.group().reduceSum(function(d){
            return d.numStreamsFair;
        });
        var poorGroup = minutes.group().reduceSum(function(d){
            return d.numStreamsPoor;
        });

        streamChart = dc.compositeChart("#stream-chart");

        streamChart.dimension(minutes).x(d3.scale.linear().domain([-60, 0]))
            .width((window.innerWidth - 130) * 0.95)
            .height((window.innerHeight - 158) * 0.6)
            .transitionDuration(0)
            .xAxisLabel("Minutes Ago")
            .yAxisLabel("Number of Streams")
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .elasticY(true)
            .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
            .renderlet(function(chart){
                chart.selectAll("g.x text")
                    .text(function(d){
                        return -1 * d;
                    });
            });

        streamChart.compose([
            dc.lineChart(streamChart)
                .group(goodGroup, "Good")
                .colors(['#248221']),
            dc.lineChart(streamChart)
                .group(fairGroup, "Fair")
                .colors(['#FF7A00']),
            dc.lineChart(streamChart)
                .group(poorGroup, "Poor")
                .colors(['#DE2B1E'])
        ]);

        streamChart.render();

然后，每两秒钟，我更新数据数组，用更新的数据重新创建组，并重新绘制图表，如下所示：

        streamChart.children()[0].group(goodGroup);
        streamChart.children()[1].group(fairGroup);
        streamChart.children()[2].group(poorGroup);

        streamChart.redraw();

问题来自于我在更新时调用.group时没有提供名称的事实，因此图例的名称只有0＆＃39; s。当我尝试向组函数添加名称参数时，图例会正确更新，但会导致一些奇怪的问题。

首先，我指定名称的组从图表中消失（例如，如果我使用（goodGroup，＆＃34; Good＆＃34;），基于goodGroup组的折线图将从compositeChart中消失）。

其次，图例中与该组关联的颜色变为黑色（例如，使用goodGroup的图表有绿线。更新组后，它在图例中显示为黑色）。

最后，将鼠标悬停在受影响的组上会突出显示剩余的组（例如，仅更新goodGroup，然后将鼠标悬停在其图例标签上，同时突出显示fairGroup和poorGroup图表。）

很抱歉，如果这听起来令人困惑。以下是我所谈论的一些截图：

Not trying to update the names/labels

What happens when I update with streamChart.children()[0].group(goodGroup, "Good");

更新dc.js复合图表上的图例标签导致组消失

0 个答案: