I'm trying to create a bar chart with custom values for each bar along the xAxis in D3, and thought I'd try to use the tickValues. Just to try it out I gave it some dummy data but it doesn't work like this:

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

    .tickValues(['hi','b','c','d','e']);

Here's the xScale:

gon.votes.length is an array of total votes counts for EACH answer and functionally is there only to return how many bars there will be for a specific survey question(this is a survey app fyi)

  var xScale = d3.scale.linear()
    .domain([0,gon.votes.length])
    .range([0,w]);

Finally, when I call

function(d){ return d.title}

This will extract the appropriate title for each bar.

Also here is the html of the ticks of the xAxis that gets rendered: NaN

Any tips on how to put this along the xAxis? Is trying to modify the ticks the wrong approach?

I'm trying to create a bar chart with custom values for each bar along the xAxis in D3, and thought I'd try to use the tickValues. Just to try it out I gave it some dummy data but it doesn't work like this:

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

    .tickValues(['hi','b','c','d','e']);

Here's the xScale:

gon.votes.length is an array of total votes counts for EACH answer and functionally is there only to return how many bars there will be for a specific survey question(this is a survey app fyi)

  var xScale = d3.scale.linear()
    .domain([0,gon.votes.length])
    .range([0,w]);

Finally, when I call

function(d){ return d.title}

This will extract the appropriate title for each bar.

Also here is the html of the ticks of the xAxis that gets rendered: NaN

Any tips on how to put this along the xAxis? Is trying to modify the ticks the wrong approach?

• javascript
• d3.js
• bar-chart
• data-visualization

• "Doesn't work"? Note that you shouldn't use ticks and tickValues at the same time. – Lars Kotthoff Commented Jun 13, 2013 at 14:11
• whoops, sorry, I actually was playing around with all the tick functions given by d3, and ticks should have been mented out when I posted it – Keith Johnson Commented Jun 13, 2013 at 14:15
• So in what way does it not work? Do you get an error message? – Lars Kotthoff Commented Jun 13, 2013 at 14:22
• No error message, but I added the relevant HTML for the x-axis – Keith Johnson Commented Jun 13, 2013 at 14:24
• Does your xscale support these particular categorical values? – Lars Kotthoff Commented Jun 13, 2013 at 14:46

1 Answer 1

Ah, I see you were using a linear scale. In this case you need an ordinal scale, since the domain is a set of discrete values (the list of titles).

Working example: http://tributary.io/inlet/5775047 There are ments in the code for the axis part.

The issue is that the range array needs to have as many values as there are labels in the domain array. Otherwise it recycles. In your case, the first label was on 0, then w, then 0, then w, and so on.

To get the titles dynamically from the array of data, you need to use the map method on the array. https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Working example with dynamic titles: http://tributary.io/inlet/5775215