Question

I am working with a bar chart that was based off of this, and I want to modify the x-axis labels (either rotate them or only show every other or every third…something that will allow me to fit labels without their overlapping). I’ve spent quite a bit of time looking into this, but it seems easier said than done (although I am pretty new to d3). I believe the code segments that are in question are among these:

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

…

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

…

x.domain(data.map(function(d) { return d.State; }));

…above is where the mapping happens (I assume based on the ‘map’ function)

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

…

var state = svg.selectAll(".state")
  .data(data)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

…

  state.selectAll("rect")
  .data(function(d) { return d.ages; })
.enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.y1); })
  .attr("height", function(d) { return y(d.y0) - y(d.y1); })
  .style("fill", function(d) { return color(d.name); });

The problem is that I don’t necessarily want an x-axis label for every bar in the chart (it gets too cluttered). I have already tried several different ways of using

axis.ticks
axis.tickValues
axis.tickSubdivide
axis.tickSize

but I think they fail because d.State is married to its respective column (my graph uses dates instead of the name of a state)…any insight?

Sorry for the messy question. I welcome edits by those who understand what I’m asking to make my question more clear (I’m not sure of the best way to ask it).

Answer 1

The line

x.domain(data.map(function(d) { return d.State; }));

Is setting the domain for the scale that the axis uses. Because the scale is ordinal the axis defaults to using all the values for ticks. You should be able to set the actual tick values using the axis.tickValues function you mention above. You will just have to set it after the call that sets the scale domain because I suspect setting the domain resets the tickValues. Simply add something like:

xAxis.tickValues(data.map( function(d,i) 
  { 
    if(i % 2 ===0 ) return d.State; 
  })
    .filter(function (d) 
      { return !!d; } ));

Here I am mapping the data data to a single array of selected State values interspersed with “undefined” and then filtering out all the undefineds. The remaining State values become the ticks.

If you are using underscore you can probably make the line a lot prettier.

You can see the working solution here.