javascript - 多线图

Question

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

Answer 1

我不确定您的代码具体有什么问题(除非有一些 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();