5

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);
Bjarte
  • 2,167
  • 5
  • 27
  • 37

1 Answers1

7

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

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • 4
    The [extent ticks](http://bl.ocks.org/2996785) example is particularly relevant here. – mbostock Feb 05 '13 at 16:36
  • 1
    Thanks, the tickValues gave me the wanted result. The ticks() gave some strange behaviour for me and was not good placements of the date. (Seemed random where it put it almost, was not near start or end). – Bjarte Feb 06 '13 at 09:53