Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ketur P
13,975 PointsD3 - How do you create an axis using an Objects value?
For example I would like to create an x-axis on my chart using the values from the 'due' amount.
var data = [ { "due": 89.99, "datestr": "2012-12-01 00:00:00", "paid": 89.99 }, { "due": 89.99, "datestr": "2013-01-01 00:00:00", "paid": 101.25 } { "due": 109.99, "datestr": "2013-02-01 00:00:00", "paid": 143.69 }, { "due": 109.99, "datestr": "2013-03-01 00:00:00", "paid": 130.65 } ];
3 Answers
Iain Simmons
Treehouse Moderator 32,305 PointsIf you haven't already, check out Treehouse's D3.js course. The third stage will cover how to generate an axis for the chart.
Otherwise, here are some articles that also explain how to do that:
- SVG Axes | D3 GitHub wiki
- D3.js Axes | Dashing D3.js
- Chapter 8. Axes | Interactive Data Visualization for the Web
Basically, you have the axis() function/method that needs to be passed a scale so it knows the limits of the axis and how the data is distributed.
Iain Simmons
Treehouse Moderator 32,305 PointsOh in that case you want to pass an array to axis.tickValues.
That should override the default ticks and put them where you explicitly specify, which in this case would be an array of your paid values, sorted in ascending order.
Ketur P
13,975 PointsThanks Iain. I think I got it figured out now :)
Ketur P
13,975 PointsKetur P
13,975 PointsHi Iain,
Yes I've watched that course already. I am able to get it to scale. However my issue is, I do not want a scale. I want each value to placed as a tick on the x-axis.