В диаграмме MultiBar с nvd3/d3 отображаются только метки для каждого другого тика по оси x. Как я могу заставить их всех появиться?

Данные:

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"
      }
    ]

Создание диаграммы (выведенной из директивы angularjs):

nv.addGraph →   chart = nv.models.multiBarChart()     .stacked(правда)     .showControls(ложь)

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)

Вывод:

Output

Ожидаемый результат будет иметь все 7 меток: M T W R F S U

Ответы

Ответ 1

Я смотрел на nvd3.org и не мог найти никакой реальной документации, но, проверяя исходный код, я нашел https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js, который показал логический параметр диаграммы "reduceXTicks" с комментарием, указывающим, что он сделает то, что вы хотите. Я попробовал это с одним из примеров диаграмм, и это сработало. В частности, я использовал:

chart
   .reduceXTicks(true)

Ответ 2

Нет надлежащей документации, но вы можете ее получить. Просто добавьте нижнюю строку к диаграмме уменьшитьXTicks: false

Отдых будет следовать. Благодаря