如何创建动态表 - Crossfilter - dc.js

Question

How can i create a dynamic Table like in the Airline on-time performance Example at the Crossfilter Homepage

http://square.github.io/crossfilter/

Answer 1

It's not full-featured but you can use the dc.js dataTable for this:

https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.dataTable

For fancier tables some people have had success integrating DataTables.js

https://github.com/dc-js/dc.js/issues/966

Answer 2

I used this one. And it works :)

 <div class="row">
        <table id='data-table'>
            <thead>
            <tr class='header'>
                <th>TestCase</th>
                <th>TestScript</th>
                <th>MonType</th>
            </tr>
            </thead>
        </table>
    </div>



dc.dataTable('#data-table')
        .dimension(TestCaseDim)
            .group(function (d) {
                return d.Timestamp.bold().fontcolor("darkblue");
            })
        .columns([
            function (d) { return d.TestCase; },
            function (d) { return d.TestScript; },
            function (d) { return d.MonitorType; }

        ])
        .size(500) 
        .order(d3.descending)
        .renderlet(function (table) {
            table.selectAll('.dc-table-group').classed('info', true);
        });