dc.js: Setting Categorical Bar Chart X Axis with a Wide Domain

Question

I have a csv with a column that is a category variable that I want to set on the x Axis of a dashboard using dc.js

I know that I can set the set the x-axis as this (copied from this post)

.x(d3.scale.ordinal().domain(["", "a", "b", "c"])) // Need empty val to offset first value
.xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis

However, is there any way I can replace the a,b, and c with a variable that captures all of this? My column has 20 different categories and I don't want to type them out by hand. My code is below (the column is d.geo)

var geoValue = ndx.dimension(function (d) {
    return d.geo;
});
var geoGroup = geoValue.group();

geoChart
    .width(960)
    .height(150)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(geoValue)
    .group(geoGroup)
    .transitionDuration(500)
    .gap(10)
    .x(d3.scale.ordinal().domain(SOLUTION GOES HERE))
    .xUnits(dc.units.ordinal)
    .elasticY(true)
    .xAxis().tickFormat();

As of dc.js 2.0, ordinal domains are calculated automatically. — Gordon, May 20 '15 at 11:58

score 0 · Answer 1 · edited Feb 25 '18 at 05:09

I think the following should work

.x(d3.scale.ordinal().domain(geoValue))

the following worked for me. I was also struggling with a similar scenario

var carTypeDim = ndx.dimension(function(d) { return d["car-type"]; });
carTypeGroup = carTypeDim.group()

carTypeChartBar
  .x(d3.scale.ordinal().domain(carTypeDim)) 
  .xUnits(dc.units.ordinal)
  .dimension(carTypeDim)
  .group(carTypeGroup);

dc.js: Setting Categorical Bar Chart X Axis with a Wide Domain

1 Answers1