javascript - d3js axis dates start and end value only -

javascript - d3js axis dates start and end value only -

resolved:

thanks, tickvalues gave me wanted result. used values d3.min , d3.max:

var xmin = d3.min(groups, function(c) { homecoming d3.min(c.values, function(v) { homecoming v.date; }); }); var xmax = d3.max(groups, function (c) { homecoming d3.max(c.values, function (v) { homecoming 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 have d3js multi-series line chart.

the x axis bottom , time (the range of depends on user selection, can few days, weeks, months or years even). y axis value , decimal.

what have problem labels on axis overlapping , it's looking rather poorly.

so question if there way show first date on axis , lastly date?

i have based chart on one: http://bl.ocks.org/3884955

my code x-axis:

var x = d3.time.scale().range([0, dimensions.width]); x.domain([ d3.min(groups, function (c) { homecoming d3.min(c.values, function (v) { homecoming v.date; }); }), d3.max(groups, function (c) { homecoming d3.max(c.values, function (v) { homecoming 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 number of ticks ticks() function or, if doesn't produce desired result, seek setting tick values explicitly tickvalues().

javascript canvas svg charts d3.js