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);
通过此我可以过滤数据,但复合图表中的日期范围显示不正确,