Resolved:
Thanks, the tickValues gave me the wanted result. I used the values from d3.min and d3.max:
var xMin = d3.min(groups, function(c) { return d3.min(c.values, function(v) { return v.date; }); });
var xMax = d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); });
x.domain([xMin,xMax]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format('%y-%m-%d'))
.orient("bottom")
.tickValues([xMin, xMax]);
Problem:
So I have a D3js multi-series line chart.
The X axis is bottom and is time (the range of this depends on the user selection, can be few days, weeks, months or years even). The Y axis is value and is decimal.
What I have problem with is that the labels on the axis is overlapping and it's looking rather poorly.
So my question is if there is a way to show only the first date on the axis and the last date?
I have based the chart on this one: http://bl.ocks.org/3884955
My code for x-axis:
var x = d3.time.scale().range([0, dimensions.width]);
x.domain([
d3.min(groups, function (c) { return d3.min(c.values, function (v) { return v.date; }); }),
d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); })
]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format('%a %d'))
.orient("bottom")
.ticks(5);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + dimensions.height + ")")
.call(xAxis);
Try adjusting the number of ticks with the ticks()
function or, if that doesn't produce the desired result, try setting the tick values explicitly with tickValues()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With