d3.js - 如何在离散BarChart nvd3.js上的yaxis上设置域和缩放

Question

我在其中一个应用程序中使用d3.js图表​​。
他们在这张图片中
参见Charts

对于Money图表上的Y轴(如图中所示)，我希望将最大值四舍五入为400，无论此处的最大条形尺寸为358.72美元，但我想将条形图保持在358.72，但在Y轴上它将为400限制。

代码在这里

tradesChart = [ 
      {
        key: "Cumulative Return",
        values: [
                        {
            "label" : "6E",
            "value" : 100       },
                    {
            "label" : "NG",
            "value" : 100       },
                    {
            "label" : "TF",
            "value" : 67        }        ]
      }
    ];
        nv.addGraph(function() {

      var chart = nv.models.discreteBarChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value/100 })
          .staggerLabels(true)
          .showValues(true)
          .valueFormat(d3.format('.0%'))

      chart.yAxis.tickFormat(function(d) { return d3.format('d')(d*100) + '%'; });

      d3.select('#chart-trades svg')
        .datum(tradesChart)
        .transition().duration(500)
        .call(chart);

      nv.utils.windowResize(chart.update);

      return chart;
    });

请帮我解决这个问题

Answer 1

您需要修改Y轴比例尺的域。通常，它是使用以下语句从数据的最大值派生的:

yScale.domain([0, d3.max(data, function (d) { return d.v; }) ]);

在您的情况下，您应该对其进行修改，使其更像这样:

yScale.domain([0, 400]);

另外，如果要从数据中设置最大值或最小静态值，则可以执行以下操作:

yScale.domain([0, d3.max(data, function (d) { return d.v > 400 ? d.v : 400; }) ]);

完整的jsfiddle示例是 here。

这就是使用D3.js的方法，我对古老的nvd3.js库不熟悉，所以我不确定如何访问该比例尺，但是我看一下是否可以找到它。