Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3js axis dates start and end value only

Resolved:

Thanks, the tickValues gave me the wanted result. I used the values from d3.min and d3.max:

Result

    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.

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);
like image 266
Bjarte Avatar asked Feb 05 '13 13:02

Bjarte


1 Answers

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().

like image 81
Lars Kotthoff Avatar answered Nov 08 '22 10:11

Lars Kotthoff