Search code examples
d3.jsdc.jscrossfilter

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

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

My data sample

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

My code

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

Expected Output

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

Solution

  • Running your code produces the following error in the developer tools console. (A super helpful tool for all coding in D3 and 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)

    The issue is that .sortBy() takes a function - here are the docs.

    Fixing that, we get basic, decent output, below. It still needs a lot of formatting using CSS, or you might consider using dc-tableview or dc.datatables.js if you want features like pagination.

    screenshot of output table

    Here's a fiddle with the working code.