Accepted answer

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:


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


so that it knows to use ordinal marks.


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()
    .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)')

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

Related Query