javascript - d3js axis date start y end value only

canvas svg

Question

Resuelto:

Gracias, los tickValues ​​me dieron el resultado deseado. Usé los valores de d3.min y 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]);

Problema:

Así que tengo un gráfico de líneas de varias series D3js.

El eje X está abajo y es el tiempo (el rango de esto depende de la selección del usuario, puede ser de pocos días, semanas, meses o incluso años). El eje Y es valioso y es decimal.

Lo que tengo problema con es que las etiquetas en el eje se superponen y se ve bastante mal.

Entonces mi pregunta es si hay una manera de mostrar solo la primera fecha en el eje y la última fecha.

He basado el cuadro en este: http://bl.ocks.org/3884955

Mi código para el eje x:

    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);

Answer 1

Intente ajustar el número de tics con la función ticks() o, si eso no produce el resultado deseado, intente configurar los valores tick de manera explícita con tickValues() .