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 之间的值，但是如果您的值超出该范围轴调整并且这些值仍然会显示。但是，如果您尝试这样的操作：

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

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

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

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

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

希望您现在对如何进行有一个清晰的认识。

编辑 :: 我终于设法找出发生了什么。您的代码似乎没有任何问题。问题似乎特定于累积线图表（），它是为了成为一位用户提到的索引图表而制作的。如果您想详细了解这里是：Bug

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