It is decided:
Thanks, tickValues gave me the desired 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 line diagram of the D3js series.
The X axis is the bottom and time (the range depends on the user's choice, it can be several days, weeks, months, or even years). The y axis is a value and is decimal.
I have a problem with the fact that the labels on the axis overlap and look pretty bad.
So my question is, is there a way to show only the first date on the axis and the last date?
I based the diagram on this: http://bl.ocks.org/3884955
My code for the 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);