web-dev-qa-db-ja.com

nvd3 / d3のMultiBarチャートには、x軸上の1つおきの目盛りのラベルのみが表示されます。どうすればそれらすべてを表示させることができますか？

データ：

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

出力：

Output

期待される出力には、7つのラベルすべてが含まれます：M T W R F S U

angularjscoffeescriptd3.jsnvd3.js
20
Z Jones

Nvd3.orgを調べたところ、実際のドキュメントは見つかりませんでしたが、ソースを確認すると、 https://github.com/novus/nvd3/blob/master/src/modelsが見つかりました。 /multiBarChart.js は、「reduceXTicks」のブールグラフパラメーターと、必要な処理を実行することを示すコメントを示しています。チャートの例の1つで試してみたところ、うまくいきました。具体的には、次のものを使用しました。

chart
   .reduceXTicks(true)
25
Peter Alfvin

適切なドキュメントはありませんが、達成することはできます。以下の線をチャートに追加するだけですXTicksを減らす：false

残りは続きます。ありがとう

1
Dwarkamoye