Hay una manera fácil de alinear las etiquetas de texto entre las garrapatas?

Aquí es mi eje de tiempo con las etiquetas sobre las garrapatas:

d3.js: Alinear el texto entre las etiquetas de garrapatas en el eje

Me gustaría colocar estas etiquetas como las de aquí:

d3.js: Alinear el texto entre las etiquetas de garrapatas en el eje

InformationsquelleAutor oluckyman | 2013-07-09

7 Comentarios

  1. 48

    Que terminó con uno de los Lars Kotthoff los consejos.

    Cada vez cuando me call(axis) yo también ajustar las etiquetas de texto.

    Aquí está simplificado código:

    function renderAxis() {
        axisContainer
            .transition().duration(300)
            .call(axis)                  //draw the standart d3 axis
            .call(adjustTextLabels);     //adjusts text labels on the axis 
    }
    
    function adjustTextLabels(selection) {
        selection.selectAll('.major text')
            .attr('transform', 'translate(' + daysToPixels(1) / 2 + ',0)');
    }
    
    //calculate the width of the days in the timeScale
    function daysToPixels(days, timeScale) {
        var d1 = new Date();
        timeScale || (timeScale = Global.timeScale);
        return timeScale(d3.time.day.offset(d1, days)) - timeScale(d1);
    }

    Actualización:

    Por CIERTO, aquí es un calendario demo con terminé: http://bl.ocks.org/oluckyman/6199145

    d3.js: Alinear el texto entre las etiquetas de garrapatas en el eje

  2. 6

    No es fácil (es decir, built-in) forma de hacerlo, pero todavía se puede lograr. Hay un par de opciones. La más sencilla es probablemente el uso de la tickFormat función para especificar un formato con un número adecuado de espacios en el frente/después de los números. Esto tendría que ser a mano optimizada para cada aplicación, aunque.

    Alternativamente, puede seleccionar los elementos de la etiqueta después de que han sido elaborados y agregar una transform atributo que cambia en consecuencia. De nuevo, esto tendría que ser a mano en sintonía.

    Su tercera opción es la de dos ejes diferentes, uno para las garrapatas y uno para las etiquetas. La idea es que el eje que proporciona las garrapatas no tiene las etiquetas y el otro ninguna de las garrapatas. Debe establecer la garrapata valores de manera adecuada, pero al menos usted no tiene que adivinar el derecho de desplazamiento.

    • la primera no la ayudaría en mi caso porque el eje es ampliable.
    • En todos estos casos, usted tendría que restablecer los parámetros adecuados después de la ampliación.
  3. 2

    Usted puede hacer esto mediante el uso de axis.tickSize(major[[,minor],end]) y .tickSubdivide(). Su garrapatas son configurados en línea con la mayor de las garrapatas, pero si usted ajuste la altura de estas garrapatas a 0, y establecer una cierta altura para menores de garrapatas, y especificar que no hay un menor de garrapatas entre cada par de las principales garrapatas, usted terminará para arriba con rótulos de marcas de graduación entre sus garrapatas. El código sería así:

    var myAxis = d3.svg.axis()
        .ticks(15)
        .tickSubdivide(1)
        .tickSize(0, 6, 0);

    Tenga en cuenta que usted necesita para establecer explícitamente un fin de tamaño. Si sólo proporcionan dos números, se interpretarán como major y end y minor predeterminada es 0.

    Aquí un el violín.

    • Buen hack! Pero debido a este hack los datos serán transferidos y en lugar de «3» obtendrá «3.5». Ver la imagen: i.stack.imgur.com/OmfDN.png
    • Me gustaría advertir en contra de poner una etiqueta en un lugar diferente de la garrapata que representa ese valor. Como usuario, quiero suponer que una garrapata entre las dos etiquetas que representan un valor entre las etiquetas. Tener que representar el número en un lado o el otro crea ambigüedad. También, d3 no tiene una manera de hacerlo.
    • Hay un caso especial: el calendario. En el calendario de fechas y días de la semana se colocan entre las garrapatas.
  4. 1

    Ya un par de buenas respuestas, pero sólo para añadir uno más. Nota el uso de text-anchor.

    Misma idea: Después de su llamada, seleccione el texto, el cambio de posición.

    .call(xAxis)                
    .selectAll(".tick text")
    .style("text-anchor", "start")
    .attr("x", axisTextAdjust)
    • Exactamente lo que necesitaba, gracias
  5. 0

    Me hacen esto a menudo por el apilamiento de varios ejes, cada uno con una medida .tickFormat().

    Si estoy colocando etiquetas en entre fechas, a menudo me voy a hacer algo como esto:

    @timeDaysAxisLabels = d3.svg.axis()
        .scale(@timescale)
        .orient('bottom')
        .ticks(d3.time.hour.utc, 12)  # I want ticks at noon, easiest to just get them ever 12 hours
        .tickFormat((d) =>
            # only draw labels at noon, between the date boundaries
            if d.getUTCHours() == 12
                # draw the label!
                formatter = d3.time.format.utc('%a %d %b')  # "Mon 12 Apr"
                return formatter(d)
            else
                # not noon, don't draw anything
                return null)
        .tickSize(0)
        .tickPadding(30)

    También voy a crear un eje con ninguna de las etiquetas de todo, y un no-cero .tickSize() a dibujar las garrapatas, pero este bloque por encima de las posiciones de la fecha de etiquetas en el centro de la «columna».

  6. 0
            svg.append("g")
              .attr("class", "axis axis-years")
              .attr("transform", "translate(0," + (height + 1) + ")")
              .call(xAxis)
            .selectAll("text")
    
         .attr("x", "-1.8em")
         .attr("y", ".00em")
         .attr("transform", function (d) {
             return "rotate(-90)"});
  7. 0

    Usted puede ser que desee considerar el uso de D3FC, que tiene una gota en el reemplazo para el D3 eje componente que soporta esta característica.

    He aquí un ejemplo que sustituye a la D3 eje d3.axisBottom, para la D3FC equivalente fc.axisBottom:

    const axis = fc.axisBottom(linear)
      .tickCenterLabel(true);

    La tickCenterLabel centros de las etiquetas de los ejes, como se solicitó.

    Aquí está lo que el eje se ve como con tickCenterLabel = false:

    d3.js: Alinear el texto entre las etiquetas de garrapatas en el eje

    Y aquí con el tickCenterLabel = true:

    d3.js: Alinear el texto entre las etiquetas de garrapatas en el eje

    La divulgación completa – soy un mantenedor y colaborador de D3FC

Dejar respuesta

Please enter your comment!
Please enter your name here