javascript - 为 D3.js 图设置零基线

Question

我们有一个图表，当所有数据为零时，在 y 轴中间显示零美元值，并在下面显示一些负值。最好将零放在底部，将美元值(value)放在侧面。

这是图形代码:

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(false)
      .rotateLabels(0)
      .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.1)
      .tooltipContent(function (key, y, e, graph) {
          return '<p> Total Cost: $' + graph.value + '</p>';
      })
    ;

    chart.xAxis
        .tickFormat(function(d) { return d3.time.format('%b, %y')(new Date(d)); });

    chart.yAxis
        .tickFormat(function(d) { return '$' + d3.format(',f')(d) });
    d3.select('#hardware_costs_graph svg')
        .datum(exampleData())
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });

如何更改基线以便不显示负值？

Answer 1

谢谢拉尔斯。我确实搜索了这个答案一段时间，但找不到。

这是为任何需要它的人提供的解决方案。

向图表实例化添加了forceY:

var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(false)
      .rotateLabels(0)
      .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.1)
      .tooltipContent(function (key, y, e, graph) {
          return '<p> Total Cost: $' + graph.value + '</p>';
      })
      .forceY([0,5])
    ;