我一直在尝试使用 dc.js 和 crossfilter 来构建数据表功能以列出一些 data.But 数据未按预期显示

Question

我一直在尝试使用 dc.js 和交叉过滤器来构建数据表功能以列出一些 data.But 数据未按预期显示

我的数据样本

{
   "name": "Thomas Ludlow Hallaway",
   "urlslug": "\/wiki\/thomas_ludlow_hallaway_(new_earth)",
   "id": "secret identity",
   "align": "bad characters",
   "eye": "brown eyes",
   "hair": "brown hair",
   "sex": "male characters",
   "gsm": "",
   "alive": "deceased characters",
   "appearances": 36,
   "first appearance": "1940, may",
   "year": 1940
 },
 {
   "name": "Jeannette",
   "urlslug": "\/wiki\/jeannette_(new_earth)",
   "id": "secret identity",
   "align": "bad characters",
   "eye": "blue eyes",
   "hair": "white hair",
   "sex": "female characters",
   "gsm": "",
   "alive": "living characters",
   "appearances": 35,
   "first appearance": "2009, january",
   "year": 2009
 }

我的代码

function listCharacters(ndx) {
  var dim = ndx.dimension(dc.pluck("name"));
  dc.dataTable("#all-characters")
      .dimension(dim)
      .group(function(d) {
        return "";
      })
      .columns(["name", "urlslug", "first appearance"])
      .size(Infinity)
      .sortBy("name")

      .order(d3.ascending)
      .transitionDuration(1000);
}

预期输出

Name urlslug first appearance Thomas \/wiki\/jeannette_(new_earth) 1940, may Jeannette \/wiki\/thomas_ludlow_hallaway_(new_earth) 2009, january

Answer 1

运行您的代码在开发人员工具控制台中产生以下错误。（对 D3 和 dc.js 中的所有编码都非常有用的工具！）

Uncaught TypeError: _sortBy is not a function
    at VM164 dc.js:7999
    at Array.sort (<anonymous>)
    at nestEntries (VM164 dc.js:7998)
    at renderSections (VM164 dc.js:7962)
    at Object._chart._doRender (VM164 dc.js:7874)
    at Object._chart.render (VM164 dc.js:2092)
    at Object.dc.renderAll (VM164 dc.js:251)
    at (index):85
    at dispatch (VM161 jquery-1.11.0.js:4624)
    at elemData.handle (VM161 jquery-1.11.0.js:4292)

问题是 .sortBy() 需要一个函数 - here are the docs。

解决这个问题，我们得到基本的、体面的输出，如下所示。它仍然需要使用 CSS 进行大量格式化，或者如果您想要分页等功能，您可以考虑使用 dc-tableview or dc.datatables.js。

Here's a fiddle 与工作代码。

我一直在尝试使用 dc.js 和 crossfilter 来构建数据表功能以列出一些 data.But 数据未按预期显示

I've been trying to use dc.js and crossfilter to build the datatable functionality to listout some data.But the data is not displaying as expected

d3.js

crossfilter

dc.js