Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to filter data by selecting a table element with dc.js?

Is it possible to filter data by selecting a table element with dc.js?

I'm working off the nasdaq example with my own data.

In the datatable I have my own column called name :

.columns([
                    function (d) {
                        return d.date;
                    },
                    function (d) {
                        return d.name
                    },

 .....

I have the crossfilter imension and group set up as follows which I think is correct.

    var name = ndx.dimension(function (d) {
            return d.name
        });
        var nameGroup = name.group();

Edit Here is the html where name is dc-table-column_2

<table class="table table-hover dc-data-table dc-chart">
<thead>
<tbody>
<tr class="dc-table-group info">
 <tr class="dc-table-row">
 <td class="dc-table-column _0">05/01/2012</td>
 <td class="dc-table-column _1">12/31/9999</td>
 <td class="dc-table-column _2">Eric</td>
 </tr>
</tbody>

When someone clicks on the name in the table I want to filter all the charts based on this name and render some metadata in another div (not related to d3 or crossfilter). I can't find an example where this is achieved. I was trying to use d3s onClick() event but I haven't been successful. Can someone point me towards a solution?

like image 323
Travis Avatar asked Dec 28 '25 11:12

Travis


1 Answers

Without seeing where you are trying to implement on click, or the DOM, I would suggest something like the following general structure for implementing onClick:

d3.selectAll("DOM element associated with names in the table").on("click", function () {

    //this line to store clicked item value for use later 
    var value = this.value; 

    d3.select("ids of charts").
    set properties to filter here using stored value

    d3.select("unrelated DOM id").text(stuff you want rendered);

Alternately you can just use the html onclick property for the non d3 related stuff and the d3.selectAll().on("click") to filter your table.

See here for what appears to be a related question:

Redrawing histograms with Crossfilter and D3

Or here where I did something conceptually similar:

http://www.ryansloan.org/energapp/app.html

like image 136
rysloan Avatar answered Dec 31 '25 00:12

rysloan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!