6

jsFiddle: http://jsfiddle.net/PYeFP/

I have a bar chart set up that graphs a users number of trips by day

        tripVolume = dc.barChart("#trip-volume")
               .width(980) // (optional) define chart width, :default = 200
               .height(75) // (optional) define chart height, :default = 200
               .transitionDuration(0) // (optional) define chart transition duration, :default = 500
               .margins({ top: 10, right: 50, bottom: 30, left: 40 })
               .dimension(tripsByDateDimension) // set dimension
               .group(tripsByDateGroup) // set group
               // (optional) whether chart should rescale y axis to fit data, :default = false
               .elasticY(false)
               // (optional) whether chart should rescale x axis to fit data, :default = false
               .elasticX(false)
               // define x scale
               .x(d3.time.scale().domain([tripsByDateDimension.bottom(1)[0].startDate, tripsByDateDimension.top(1)[0].startDate ]))
               // (optional) set filter brush rounding
               .round(d3.time.day.round)
               // define x axis units
               .xUnits(d3.time.days)
               // (optional) whether bar should be center to its x value, :default=false
               .centerBar(true)
               // (optional) render horizontal grid lines, :default=false
               .renderHorizontalGridLines(true)
               // (optional) render vertical grid lines, :default=false
               .renderVerticalGridLines(true)
               .brushOn(false);

The graph displays fine but I would like to filter it using some jQuery controls. When the user selects the date I am trying to add a filter to the chart, the filter gets added but the chart does not change, even if I redraw() or render().

This is how the crossfilter is setup:

tripsCx = crossfilter(data.rows);
var allTripsGroup = tripsCx.groupAll();

var tripsByDateDimension = tripsCx.dimension(function (d) { return d.startDate; });
var tripsByDateGroup = tripsByDateDimension.group(d3.time.day);

The following are some of the methods I have used to try to apply a filter:

This should use the filterRange:

d.filter(d.dimension().top(20)[19], d.dimension().top(20)[0]);

FilterFunction:

d.filter(function (d) {
    return d.getTime() > start.valueOf() && d.getTime() < end.valueOf();
});

FilterExact:

d.filter(d.dimension().top(20)[0]);

I also tried bypassing the chart and applying the filter directly on the dimension:

d.dimension().filterFunction(function (d) {
  return d.getTime() > start.valueOf() && d.getTime() < end.valueOf()
});

Nothing I have done causes the chart to change.

I am beginning to think that I have the wrong expectation of what the filter function should do?

How can I manually filter the data in the dimension to have the chart updated? I don't want to use a brush. I will be filtering the data based on different criteria, I'm just trying to get the simple case working first.

I've spent a couple of days on this now and I'm at a loss as to what to try next.

Any help would be greatly appreciated.

4

1 に答える 1

9

クロスフィルター フィルターを設定した後、グラフの x プロパティをリセットしようとしましたか?

やや似たケースがあり、フィルター処理された値を変更する各アクションの後に行うことは、次のようなものです

.x(..).ディメンション(...).グループ(...)

フィルターの作成/設定後

そのようなことをしようとした

$('#filter').on('click', function(){
    var minDate = tripsByDateDimension.top(5)[4].startDate;
    var maxDate = tripsByDateDimension.top(5)[0].startDate;
    console.log(tripVolume.filters());


    tripVolume.filter([minDate, maxDate]);
    tripVolume.x(d3.time.scale().domain([minDate,maxDate]));

    console.log(tripVolume.filters());

    dc.redrawAll()
});

http://jsfiddle.net/PYeFP/5/

コメントの議論によるより良い答えは、フィルターをチャートではなくディメンションに追加することです

最後に、 https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduceで言及されていることを理解する必要があります

注: グループ化は、関連するディメンションのフィルターを除いて、クロスフィルターの現在のフィルターと交差します。したがって、グループ メソッドは、このディメンションのフィルターを除くすべてのフィルターを満たすレコードのみを考慮します。そのため、支払いのクロスフィルターがタイプと合計でフィルター処理されている場合、合計によるグループ化ではタイプによるフィルターのみが観察されます。

( https://groups.google.com/d/msg/dc-js-user-group/UFxvUND7hmY/btbAjqIIzl8Jも参照)

于 2013-07-16T11:10:12.590 に答える