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

时间:2019-06-17 22:00:03

标签: d3.js dc.js crossfilter

我一直在尝试使用dc.js和crossfilter构建数据表功能以列出一些数据,但是数据并没有按预期显示

我的数据样本

{
   "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);
}

预期产量

  

名称urlslug首次出现   托马斯\ / wiki \ / jeannette_(new_earth)1940年5月   Jeannette \ / wiki \ / thomas_ludlow_hallaway_(new_earth)2009年1月

1 个答案:

答案 0 :(得分:0)

运行代码会在开发人员工具控制台中产生以下错误。 (一个超级有用的工具,可用于D3和dc.js中的所有编码!)

'result':'No Fraud'

问题在于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) 具有一个功能-here are the docs

在此基础上,我们得到了基本的体面输出。它仍然需要使用CSS进行很多格式化,或者如果您想要分页等功能,则可以考虑使用dc-tableviewdc.datatables.js

screenshot of output table

Here's a fiddle和工作代码。