Question

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

我的代码如下。

＆＃13;

<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;
				});

＆＃13;

但是我输出的输出不正确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])
;

希望你现在清楚地知道如何继续。

编辑:: 我终于设法找出发生了什么。您的代码似乎没有任何问题。问题似乎特定于cumulativeLineChart（）它的目的是成为一个用户提到的索引图。如果您想在此处详细说明，请访问：Bug

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

nvd3和d3.js Y轴渲染问题

1 个答案: