从dc.js图表​​访问过滤/剪裁的数据

时间:2015-05-27 20:40:15

标签: javascript d3.js dc.js crossfilter

我是dc.js的新手。

我有一些数据:

var data =
[
        {date: Date.UTC(2015, 4, 4), frame: "frame1" },
        {date: Date.UTC(2015, 2, 1), frame: "frame2" },
        {date: Date.UTC(2015, 2, 11), frame: "frame3" },
        {date: Date.UTC(2015, 1, 4), frame: "frame4" },
];

//create crossfilter
    cf = crossfilter(data);
//create dimension
    byDate = cf.dimension(function (d) {
            return d.date; 
    });
//create group
    byDateGroup = byDate.group();

我正在使用此dc.lineChart

    //configure timeGraph
    timeGraph = dc.lineChart("#range")
    .width(document.body.clientWidth)
    .height(100)
    .dimension(byDate)
    .group(byDateGroup)
    .transitionDuration(500)
    .elasticY(true)
    .x(d3.time.scale().domain([(byDate.bottom(1))[0].date, (byDate.top(1))[0].date + 1000]))
    ;

我想访问由可调范围选择器栏过滤的数据。我认为将函数传递给onfiltered会有效,但我不知道从chart访问什么才能返回当前过滤的数据。

    timeGraph.on("filtered", function (chart) {
     console.log(/* print the data filtered by the 'range selector' */);
});

Here's a JSFiddle with an example.如果示例正常工作,表格显示的所有内容都应显示在控制台中。

提前致谢。

1 个答案:

答案 0 :(得分:6)

在维度上使用top方法。在你的小提琴的背景下,byDate.top(Infinity)

https://jsfiddle.net/6p3vhga9/

该方法的Crossfilter API文档:https://github.com/square/crossfilter/wiki/API-Reference#dimension_top