angularjs - El gráfico MultiBar con nvd3/d3 solo muestra etiquetas para cada otra marca en el eje x. ¿Cómo puedo hacer que todos aparezcan?

coffeescript d3.js

Question

Datos:

nvd3TestData = [
      {
        values:[
          {x:"M",y:1},
          {x:"T",y:2},
          {x:"W",y:3},
          {x:"R",y:3},
          {x:"F",y:4},
          {x:"S",y:5},
          {x:"U",y:6}
        ],
        key:"Apples"
      },
      {
        values:[
          {x:"M",y:5},
          {x:"T",y:2},
          {x:"W",y:6},
          {x:"R",y:8},
          {x:"F",y:2},
          {x:"S",y:4},
          {x:"U",y:1}
        ],
        key:"Zebras"
      }
    ]

Creando el gráfico (extraído de una directiva angularjs):

nv.addGraph -> chart = nv.models.multiBarChart () .stacked (true) .showControls (false)

chart.xAxis
  .axisLabel(attrs.xAxisLabel)

chart.yAxis
  .axisLabel(attrs.yAxisLabel)
  .tickFormat(d3.format('',r''))


console.log element


d3.select(element[0].children[0])
  .datum(nvd3TestData)
  .call(chart)

nv.utils.windowResize(chart.update)

Salida:

La salida esperada tendría las 7 etiquetas: MTWRFSU

Answer 1

Busqué en nvd3.org y no pude encontrar ninguna documentación real, pero revisando la fuente, encontré https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js que mostraba un gráfico booleano parámetro de "reduceXTicks" con un comentario que indica que haría lo que quieres. Lo probé con uno de los gráficos de ejemplo y funcionó. Específicamente, utilicé:

chart
   .reduceXTicks(true)

Answer 2

No hay documentación adecuada, pero puedes conseguirla. Simplemente agregue la línea de abajo a su gráfico reduceXTicks: falso

El descanso seguirá. Gracias