d3.js Specify text for x-axis

javascript d3.js axis-labels
EnigmaRM picture EnigmaRM · Apr 23, 2013 · Viewed 27.8k times · Source

My x-axis currently has numbered ticks. I want the ticks to be replaced with data from my object (specifically the keyword value). How would I accomplish this?

I have a working Fiddle

var dataset = [
            {"keyword": "payday loans", "global": 1400000, "local": 673000, "cpc": "14.11"},
            {"keyword": "title loans", "global": 165000, "local": 160000, "cpc": "12.53" },
            {"keyword": "personal loans", "global": 550000, "local": 301000, "cpc": "6.14"},
            {"keyword": "online personal loans", "global": 15400, "local": 12900, "cpc": "5.84"},
            {"keyword": "online title loans", "global": 111600, "local": 11500, "cpc": "11.74"}
        ];

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
// xAxis
svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (h) + ")")
    .call(xAxis);
//xAxis Label
svg.append("text") 
    .attr("transform", "translate(" + (w / 2) + " ," + (h + margin.bottom - 5) +")")
    .style("text-anchor", "middle")
    .text("Keyword");

Answer

Lars Kotthoff picture Lars Kotthoff · Apr 23, 2013

The easiest way to achieve this is to set the tickFormat function for your axis:

var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickFormat(function(d) { return dataset[d].keyword; })
    .orient("bottom");

You might have to tweak the width a bit to fit the labels (or rotate them).

The "proper" way to do this would be to specify the domain values for you xScale as the keywords instead of the array indices. Then you would have to change all the other code that uses xScale as well though.

Related questions

d3 axis labeling

How do I add text labels to axes in d3? For instance, I have a simple line graph with an x and y axis. On my x-axis, I have ticks from 1 to 10. I want the word "days" to appear underneath …

Read More
d3.js axis labels - color not changing

I'm creating my axis with the following text, however the color of the labels is not changing properly; the color the text remains black. Does anybody know why? // create Axis svg.selectAll(".axis") .data(d3.range(angle.domain()[1])) .enter().append("…

Read More
How to limit d3.svg.axis to integer labels?

Is there any possibility to limit the number of d3.svg.axis integer labels displayed on the graph? Take for instance this graph. There are only 5 sizes here: [0, 1, 2, 3, 4]. However, the ticks are also displayed for .5, 1.5, 2.5 and 3.5.

Read More