我想在复合图表中应用过滤器,点击DC.js中的图例

时间:2018-02-02 13:43:31

标签: javascript angularjs d3.js dc.js crossfilter

This is my composite chart with bar and linear chart attached to it by custom method

我想点击其中一个图例(例如:否定),它应该仅基于该情绪进行过滤,期望只显示一条红线,所有其他直流图表基于此过滤。在复合材料上尝试了类似的东西,但无法做到正确..

var dateDimension = cf.dimension(function (d) { if (d.dd) { return d3.time.day(d.dd) } else { return d3.time.day() } });

                            var negativeSentimentGroup = dateDimension.group().reduceSum(function (d) { return d.sentiment === 'negative' ? 1 : 0; });
                            var positiveSentimentGroup = dateDimension.group().reduceSum(function (d) { return d.sentiment === 'positive' ? 1 : 0; });
                            var neutralSentimentGroup = dateDimension.group().reduceSum(function (d) { return d.sentiment === 'neutral' ? 1 : 0; });

                            var minDate = dateDimension.bottom(1)[0].dd;
                            minDate.setDate(minDate.getDate() - 1);

                            var maxDate = dateDimension.top(1)[0].dd;
                            maxDate.setDate(maxDate.getDate() + 1);
                            // Group comments count by date

                            var dateDimensionGroup = dateDimension.group().reduceCount();

// Plot for Daily progress of comments
                            var sentimentSeriesChart = dc.compositeChart("#sentiment-series", groupName);

                            sentimentSeriesChart.on('pretransition.hideshow', function (chart) {
                                chart.selectAll('g.dc-legend .dc-legend-item')
                                    .on('click.hideshow', function (d, i) {
                                        $scope.lineChange(d.name);
                                    });
                            });
                            var negativeSeriesChart = dc.lineChart(sentimentSeriesChart).group(negativeSentimentGroup, "Negative").colors('red');
                            var positiveSeriesChart = dc.lineChart(sentimentSeriesChart).group(positiveSentimentGroup, "Positive").colors('green');
                            var neutralSeriesChart = dc.lineChart(sentimentSeriesChart).group(neutralSentimentGroup, "Neutral").colors('orange');
                            var timeBarChart = dc.barChart(sentimentSeriesChart).group(dateDimensionGroup).centerBar(true);

                            sentimentSeriesChart.width(1000)
                                .height(200)
                                .margins({ top: 10, right: 10, bottom: 60, left: 40 })
                                .dimension(dateDimension)
                                .transitionDuration(500)
                                .brushOn(true)
                                .title(function (d) {
                                    return chartingDateFormat(d.key) + ' : ' + d.value;
                                })
                                .legend(dc.legend().autoItemWidth(true).x(450).y(180).horizontal(true).itemHeight(16).gap(80).maxItems(3))
                                .renderHorizontalGridLines(true)
                                .compose([
                                    negativeSeriesChart,
                                    positiveSeriesChart,
                                    neutralSeriesChart,
                                    timeBarChart
                                ])
                                .elasticY(true)
                                .yAxisLabel("No. of Comments")
                                .x(d3.time.scale().domain([minDate, maxDate]))
                                .xUnits(function () { return 90; })
                                .xAxis().tickFormat(d3.time.format("%d/%m"));

                            // Set number of ticks
                            sentimentSeriesChart.yAxis().ticks(5);

在上面这段代码中,我能够获得Legend上的点击事件(例如:否定),并且我只能使用否定评论过滤我的数据集,并执行,cf.remove (); (其中cf是交叉过滤器实例)并添加新的过滤数据集 - cf.add(filterData);并重新绘制完整的dc组 - dc.redrawAll(groupName);

通过此我可以过滤数据,但复合图表中的日期范围显示不正确,

This is the result I'm getting after after the Legend button click on composite chart (for example : Negative )

0 个答案:

没有答案