javascript - Accessing filteredclipped data from a dc.js chart - Stack Overflow

admin管理员组

文章数量:1026944

I'm new to dc.js.

I have some data:

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();

And I'm working with this 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]))
    ;

And I would like to access the data that is filtered by the adjustable range selector bar. I think passing a function to onfiltered would work, but I don't know what to access from chart in order to return the currently filtered data.

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

Here's a JSFiddle with an example. If the example were to work correctly, everything being displayed by the table should show up in the console.

Thanks in advance.

I'm new to dc.js.

I have some data:

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();

And I'm working with this 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]))
    ;

And I would like to access the data that is filtered by the adjustable range selector bar. I think passing a function to onfiltered would work, but I don't know what to access from chart in order to return the currently filtered data.

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

Here's a JSFiddle with an example. If the example were to work correctly, everything being displayed by the table should show up in the console.

Thanks in advance.

• javascript
• d3.js
• dc.js
• crossfilter

Share Improve this question Follow asked May 27, 2015 at 20:40 claytonkuceraclaytonkucera 37711 gold badge33 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Use the top method on the dimension. In the context of your fiddle, byDate.top(Infinity).

https://jsfiddle/6p3vhga9/

Crossfilter API documentation for the method: https://github./square/crossfilter/wiki/API-Reference#dimension_top

I'm new to dc.js.

I have some data:

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();

And I'm working with this 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]))
    ;

And I would like to access the data that is filtered by the adjustable range selector bar. I think passing a function to onfiltered would work, but I don't know what to access from chart in order to return the currently filtered data.

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

Here's a JSFiddle with an example. If the example were to work correctly, everything being displayed by the table should show up in the console.

Thanks in advance.

I'm new to dc.js.

I have some data:

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();

And I'm working with this 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]))
    ;

And I would like to access the data that is filtered by the adjustable range selector bar. I think passing a function to onfiltered would work, but I don't know what to access from chart in order to return the currently filtered data.

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

Here's a JSFiddle with an example. If the example were to work correctly, everything being displayed by the table should show up in the console.

Thanks in advance.

• javascript
• d3.js
• dc.js
• crossfilter

Share Improve this question Follow asked May 27, 2015 at 20:40 claytonkuceraclaytonkucera 37711 gold badge33 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Use the top method on the dimension. In the context of your fiddle, byDate.top(Infinity).

https://jsfiddle/6p3vhga9/

Crossfilter API documentation for the method: https://github./square/crossfilter/wiki/API-Reference#dimension_top

本文标签： javascriptAccessing filteredclipped data from a dcjs chartStack Overflow