Crossfiltering using textboxes

Question

I am been googling all around but i cannot seem to find a good example on using crossfiltering with textbox.

I am trying to add a textbox filtering on a datatable using crossfilter.

Currently following this code base http://bl.ocks.org/d3noob/6077996

and reading this wiki didnt help much

I know theres a question that has been asked but the solution is too short for me to replicate it

dc.js 3.* has a [textFilterWidget](https://dc-js.github.io/dc.js/docs/html/dc.textFilterWidget.html) built-in, which may help. It's also not all that hard to implement as @matthias.rocks suggests. — Gordon, Feb 19 '19 at 18:46

score 2 · Accepted Answer · answered Feb 19 '19 at 14:04

I'm not sure where you are at with your project, so I can only give broad advice for things you can investigate further.

Before you can filter on a dimension with crossfilter.js, you need to register that dimension. In the example you've found, this is what is being done when the var magValue, var timeDimension, var depthValue, and var volumeByDay variables are initialized.
If you aren't already, you need to listen for when a character is inserted into your textbox. This can be done with an event listener that listens for the keyup event. When the listener registers a keyup event, you can trigger a filter function on a corresponding dimension.
When using the myDimension.filter(value) function in crossfilter.js, it filters on either exact value, a range or a function depending on whether it is passed a simple variable, and array, or a function. In the example you've found this seems to be be handled by dc.js, but in the Stack Overflow and in the API you reference this is handled manually by interacting with a pre-instantiated dimension. If exact matching is what you want then you can pass the content from you textbox directly. If you want more fuzzy criteria, you can use something like Levenshtein distance (e.g. via this npm package) by passing a function when calling myDimension.filter(value).

Let me know if this helps you (or not). If you could share the code you currently have, I can address your problem more conceretely.

1 Answers1