Add labels to a d3 bar chart

Question

I have a d3 barchart for which I pull data from firebase. I want to add the labels to the x-axis. Here is the code of my barchart:

new Firebase('https://exampl.firebaseIO.com/example').on('value', function (snapshot) {
    var lst = [];
    snapshot.forEach(function(childSnapshot) {lst.push(childSnapshot.val());});
    var magValue = new crossfilter(lst).dimension(function (d) {return d.count;});
    var magLabel = new crossfilter(lst).dimension(function (d) {return d.Owner;});

    dc.barChart("#dc-magnitude-chart")
        .width(480)
        .height(150)
        .margins({top: 10, right: 10, bottom: 20, left: 40})
        .dimension(magValue)    // the values across the x axis
        .group(magValue.group().reduceSum(function(d) {return d.count;}))                            // the values on the y axis
        .transitionDuration(500)
        .centerBar(true)    
        .gap(56)       // bar width Keep increasing to get right then back off.
        .x(d3.scale.linear().domain([0.5, 7.5]))
        .elasticY(true)
        .xAxis().tickFormat(function(v) {return v;}); 
    dc.renderAll();

    });

magValue is the simple count of occurences and it is diplayd on the x-axis. I want the names that are stored in magLabel variable to be displayed below the counts. Thanks.

Answer 1

For reference: in the comments on @bencripps answer, the OP talks about using xAxis.tickValues(['One','two','three','four','five','six','seven']).

tickValues is actually if you want to specify custom ticks within the scale you're using. Right now, you're using a linear scale:

.x(d3.scale.linear().domain([0.5, 7.5]))

so it expects your tick values to be points on that scale where it can draw ticks. If you had something more like xAxis.tickValues([1, 2, 3, 4, 5, 6, 7]), it should work.

However, it sounds like you don't actually want a linear scale. d3 also has other scale types, and it sounds like the one you want is an Ordinal Scale. Ordinal scales are the scales you typically think of for bar charts; they're a type of scale that has a discrete domain. In this case, you could try changing your scale to something like:

.x(d3.scale.ordinal().domain(['One','two','three','four','five','six','seven']))

so it uses an ordinal scale instead. Since you're using dc.js, you'll also need to specify

.xUnits(dc.units.ordinal)

so that it knows to use ordinal marks.

Answer 2

Here is some simple code for adding an X axis; you will have to fiddle with the domain, and range to get the desired length, and number of ticks.

var XaxisScale = d3.scale.linear()
    .domain([0,150]) //you will have to set the domain, not sure what you want
    .range([0, magValue.length)

var xAxis = d3.svg.axis()
    .scale(XaxisScale)
    .ticks( magValue.length ) // this you will need to set as well

var xAxisGroup = $('"#dc-magnitude-chart').append("g")
    .attr('class', 'axis')
    .attr('transform', 'translate(5,8)')
    .call(xAxis);

note, the .call(xAxis) is what is actually appending the X axis to your chart.