7

nvd3 離散棒グラフに設定された特定の幅の値を取得しようとしています。最初のレンダリング後に rect 要素を変更することはできますが、グラフの設定で棒の幅を指定する方法があるようです。

これが私の現在のチャート設定です。

nv.addGraph ->
  chart = nv.models.discreteBarChart()
    .x (d) ->
      return d.label
    .y (d) ->
      return d.value
    .staggerLabels(false).showValues(false)
    .color(['#56bd78']).tooltips(false)
    .margin({top: 0, right: 0, bottom: 30, left: 0})

  chart.tooltipContent (key, x, y, e, graph) ->
    return '<h3><span>' + parseFloat(y) + '</span><em>' +
             key + '</em></h3>'

  chart.xAxis.tickFormat (d) ->
      return d3.time.format('%b')(new Date('2013/'+d+'/01'))
  # chart.xAxis.tickPadding({top: 0, bottom: 0, left: 20, right:30})

  d3.select(element).datum(data).transition().duration(500).call(chart)

  nv.utils.windowResize(chart.update)
  return chart

この特定の問題について投稿された質問が見つからないため、おそらく単純すぎて見逃していると思います。前もって感謝します。

4

4 に答える 4

11

chart.groupSpacing(0.5)それに応じて値を変更してみて、問題が解決するかどうかを確認してください。

于 2014-02-06T14:40:28.013 に答える
3

これを解決する良い方法は、CSS を使用することです。

.nv-bars rect {
  width: 20px;
}

これは、アプリケーション内で行ったことであり、うまく機能しました。

于 2016-03-25T17:35:41.560 に答える
1

私自身の質問に答えるには、jQuery を使用して値を「手動で」変更し、グラフを希望どおりに表示する必要がありました。

$(element+' rect.discreteBar').attr('transform', 'translate(17)').attr('width', 20)
$(element+' .nv-axis g text').attr('transform', 'translate(0, 5)')

Lars が指摘したように、ライブラリはアイテムの数に基づいて幅を動的に計算しますが、これは理にかなっています。

于 2013-07-17T23:14:23.507 に答える