Question

我想知道是否有任何已知方法可以在dc.js中为我的数据表有效添加“重新排序”功能。如果我的用户在完成对图表的选择之后，可以根据哪个列来决定过滤行的排序（例如，通过单击列标题），那将是非常好的。

任何想法从哪里开始？

非常感谢

Answer 1

我喜欢使用JQuery数据表：http://datatables.net/

首先添加表格和标题行：

    <table id="dc-data-table" class="list table table-striped table-bordered">
        <thead>
            <tr>
              <th>Country</th>
              <th>Users</th>
            </tr>
        </thead>
    </table>

接下来像平常一样构建你的尺寸：

    var ndx = crossfilter(data),
        countryDimension = ndx.dimension(function (d) {
            return d.country;
        }),

然后绑定jquery数据表：

var datatable = $("#dc-data-table").dataTable({
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": true,
            "bInfo": false,
            "bAutoWidth": false,
            "bDeferRender": true,
            "aaData": countryDimension.top(Infinity),
            "bDestroy": true,
            "aoColumns": [
                { "mData": "country", "sDefaultContent": ""},
                { "mData": "users", "sDefaultContent": " " }
            ]
        });

最后，如果您希望表格反映其他图表的过滤器，请将其挂钩到dc.js：

        function RefreshTable() {
            dc.events.trigger(function () {
                alldata = countryDimension.top(Infinity);
                datatable.fnClearTable();
                datatable.fnAddData(alldata);
                datatable.fnDraw();
            });
        }

        for (var i = 0; i < dc.chartRegistry.list().length; i++) {
            var chartI = dc.chartRegistry.list()[i];
            chartI.on("filtered", RefreshTable);
        }

这是一个证明这一点的jsFiddle：http://jsfiddle.net/djmartin_umich/d55My/

Answer 2

这是另一种表格排序方法，它只使用标准的jQuery和dc.js

使用列标题定义表格html。

<table id="data-table">
  <thead>
    <th class="data-table-col" data-col="a">Field A</th>
    <th class="data-table-col" data-col="b">Field B</th>
    <th class="data-table-col" data-col="c">Field C</th>
  </thead>
</table>

设置DC.js dataTable。唯一重要的是列配置。使用不动态创建标题的格式

var dataDim = xf.dimension(function(d) {return d.a;});
var dataTable = dc.dataTable("#data-table")
  .columns([
    function(d) {
      return d.a;
    },
    function(d) {
      return d.b;
    },
    function(d) {
      return d.c;
    }
  ]);

然后，只需将click事件处理程序附加到列标题，然后使用DC.js对表进行排序。编辑 - 您还必须更改维度，以便sortBy对所有数据进行排序，而不仅仅是显示数据

$('#data-table').on('click', '.data-table-col', function() {
  var column = $(this).attr("data-col");
  dataDim.dispose();
  dataDim = xf.dimension(function(d) {return d[column];});
  dataTable.dimension(dataDim)
  dataTable.sortBy(function(d) {
    return d[column];
  });
  dataTable.redraw();
});

按列重新排序数据表

2 个答案: