Question

我尝试使用dc.js＆＃39;创建复合多线图表。复合图表。我的数据采用以下格式：

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的行，但它似乎不起作用。知道我哪里错了吗？

Answer 1

我不确定你的代码是什么问题（除非有一些未定义的变量），但我已经通过摆脱.margins并计算{{1}来实现它使用maxWeekNumber。我在这里工作了：http://jsfiddle.net/28epgqn5/2/

d3.max

Answer 2

reduce函数应返回一个数字，以便开箱即用

var weekSelection = crossFilterObj.dimension(function(d){ return d.weekNumber;});
var dateDimension = weekSelection.group().reduceCount(function(d){return 1;});

var topicSelection = crossFilterObj.dimension(function(d){return d.topic;});
var topic0 = topicSelection.group().reduceCount(function (d){return 1;});

，您无需定义valueAccessor

从你的例子开始，@ vlad003小提琴：

http://jsfiddle.net/onh3bLnq/

多线图

2 个答案: