6

我在我的一个应用程序中使用 d3.js 图表。他们在这张图片中 查看图表

对于货币图表上的 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;
    });

请帮我解决这个问题

4

3 回答 3

16

您需要修改 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 在这里。

这就是使用 D3.js 的方法，我对古老的 nvd3.js 库不熟悉，所以我不确定如何访问规模，但我会看看是否能找到它。

于 2013-02-13T19:12:49.497 回答
0

强制 Y

强制进入 Y 刻度的数字列表（即 0，或最大值/最小值等）。数字告诉 d3.js 在比例中使用的值，而不是 d3.js 确定值。

数据类型：数字数组（即 [0, 50]

http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html

于 2014-07-17T20:44:51.633 回答
0

我使用 nvd3 而对我来说这有效：

nv.models.discreteBarChart().yDomain([0,400])

我无法使用它yScale.domain

于 2018-08-08T08:17:09.003 回答