我正在尝试使用 dc.js 的复合图表创建复合多线图表。我的数据采用以下格式:
var indexData = [
{id: "1", weekNumber: 1, topic:12},
{id: "2", weekNumber: 7, topic:2},
{id: "3", weekNumber: 5, topic:7},
]
我正在尝试创建图表,以便在 X 轴上有周数,在 Y 轴上有记录频率。我希望每个主题都有一行(有 20 个主题,因此有 20 行)显示每周具有该主题值的记录数。
我的代码是这样的:
var topicTimeChart = dc.compositeChart("#topicsLineChart");
var crossFilterObj = crossfilter(indexData);
var all = crossFilterObj.groupAll();
var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;});
var dateDimension = weekSelection.group().reduceCount(function(d){return d;});
var topicSelection = crossFilterObj.dimension(function(d){return d.topic;});
var topic0 = topicSelection.group().reduceCount(function (d){
if (d == 0) {
return d;
}
});
topicTimeChart.width(1200)
.height(300)
.margins(margin)
.dimension(dateDimension)
.transitionDuration(500)
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value;
})
.title(function(d){return "\nNumber of documents: " + d.key;})
.x(d3.scale.linear().domain([0, maxWeekNumber]))
.compose([
dc.lineChart(topicTimeChart).group(topic0)
]);
dc.renderAll();
目前我只是试图渲染 topic=0 的行,但它似乎不起作用。知道我哪里出错了吗?
最佳答案
我不确定您的代码具体有什么问题(除非有一些 undefined variable ),但我通过删除 .margins
并计算maxWeekNumber
使用 d3.max
。我在这里工作:http://jsfiddle.net/28epgqn5/2/
var topicTimeChart = dc.compositeChart("#topicsLineChart");
var maxWeekNumber = d3.max(indexData, function(d) { return d.weekNumber; });
var crossFilterObj = crossfilter(indexData);
var all = crossFilterObj.groupAll();
var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;});
var dateDimension = weekSelection.group().reduceCount(function(d){return d;});
var topicSelection = crossFilterObj.dimension(function(d){return d.topic;});
var topic0 = topicSelection.group().reduceCount(function (d){
if (d == 0) {
return d;
}
});
topicTimeChart.width(1200)
.height(300)
.dimension(dateDimension)
.transitionDuration(500)
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value;
})
.title(function(d){return "\nNumber of documents: " + d.key;})
.x(d3.scale.linear().domain([0, maxWeekNumber]))
.compose([
dc.lineChart(topicTimeChart).group(topic0)
]);
dc.renderAll();
关于javascript - 多线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27554559/