nvd3 和 d3.js Y 轴渲染问题

Question

我是 NVD3 库的新手。我正在尝试使用累积折线图但无法呈现 y 轴。我有两个系列，输入和输出.. x 显示日期，而 y 显示 50 - 400 范围内的值。但是我能够渲染 xaxis 但无法渲染 yaxis。请帮忙。

我的代码如下。

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
nv.addGraph(function() {
      var chart = nv.models.cumulativeLineChart()
        .x(function(d) { return d.x })
        .y(function(d) { return d.y })
        .color(d3.scale.category10().range())
        .useInteractiveGuideline(true);

      chart.forceY([0]);
      chart.xScale(d3.time.scale());
      
      chart.xAxis
        .tickFormat(function(d) {
          return d3.time.format('%x')(new Date(d));
        });
      
      var format = ',f';
          
          chart.yAxis
              .axisLabel(' ')
              .tickFormat(d3.format(format));

      d3.select('#recordChartDiv svg')
        .datum(data)
        .transition().duration(500)
        .call(chart);

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

但是，我的 yaxis 不正确导致输出低于输出。

有人可以指导我吗？

Answer 1

请试一试。希望对您有所帮助：

var chart = nv.models.cumulativeLineChart()
                .x(function(d) { return d.x })
                .y(function(d) { return d.y })
                .color(d3.scale.category10().range())
                .useInteractiveGuideline(true)
                .forceY([50,400]);

在这种情况下，它确保您的 y 轴将显示 50-400 的值，但是如果您的值超出该范围轴调整，并且如果您尝试这样的操作，这些值仍将显示 up.However :

chart.yAxis.scale().domain([0, maxValue]);

这将正确设置您的轴，但是如果任何值超出范围，它们将不会显示在您的图表中。

在此处查看实时代码示例：Example

尝试附加 forceY([50,400]);通过编写这样的代码：

var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.forceY([50,400])
;

希望您现在清楚地知道如何进行。

编辑:: 我终于设法找出发生了什么事。您的代码似乎没有任何问题。问题似乎特定于 cumulativeLineChart() 它是为了成为一位用户提到的索引图表而制作的。如果您想在此处详细说明：Bug

所以不确定这是不是故意这样做的。无论如何，如果您只是将其更改为 lineChart() 而不是您的代码将正常工作。我已经更新了你的 fiddle。现在看看这里：Working example

nvd3 和 d3.js Y 轴渲染问题

nvd3 and d3.js Y axis rendering issue

javascript

jquery

d3.js

nvd3.js