admin 管理员组

文章数量: 1086019

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
Share Improve this question edited Jun 18, 2014 at 15:41 Sam 7,39816 gold badges48 silver badges68 bronze badges asked Jun 13, 2013 at 14:09 Keith JohnsonKeith Johnson 7422 gold badges10 silver badges19 bronze badges 7
  • "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
 |  Show 2 more ments

1 Answer 1

Reset to default 6

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

本文标签： javascriptHow do I set custom ticks along the Xaxis in D3 or name the bars in a bar chartStack Overflow

版权声明：本文标题：javascript - How do I set custom ticks along the Xaxis in D3? or name the bars in a bar chart? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744054548a2525630.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。