D3.js / NVD3.js 不显示正确的值

D3.js / NVD3.js does not display correct values

本文关键字：js NVD3 D3 显示      更新时间：2023-09-26

我是D3.js和NVD3.js的新手。我创建了一个多线图来显示统计数据。y 轴和图表内显示的数字仅为整数。

但是，它不会显示数据集中的正确值。JSON 输入如下所示：

[{"key":"Anmeldungen","values":[[1446505200,92],[1447023600,112],[1447542000,361],[1448665200,6],[1449183600,10],[1449788400,2],[1449961200,3],[1450738800,4],[1451343600,9],[1451689200,2],[1452294000,7],[1452380400,5],[1453330800,7],[1453849200,2],[1454540400,4],[1454799600,7]]},{"key":"Abmeldungen ","values":[[1446505200,223],[1447023600,264],[1447542000,82],[1448665200,0],[1449183600,0],[1449788400,0],[1449961200,0],[1450738800,0],[1451343600,0],[1451689200,0],[1452294000,0],[1452380400,0],[1453330800,2],[1453849200,0],[1454540400,0],[1454799600,0]]}]

该值的第一个数字是时间戳，在图表中正确显示。第二个数字是我遇到问题的整数值。

用于呈现图表的代码如下：

var $json = JSON.parse($json);
nv.addGraph(function () {
    data = $json;
    var chart = nv.models.cumulativeLineChart()
            .x(function (d) {
                return d[0]*1000 //timestamp
            })
            .y(function (d) {
                console.log(d); //<--Outputs correct number
                return d[1]
            })
            .color(d3.scale.category10().range())
            .useInteractiveGuideline(true)
        ;
    chart.xAxis
        .tickFormat(function(d) {
            return d3.time.format('%d.%m.%Y')(new Date(d))
        });
    chart.yAxis
        .tickFormat(d3.format('d'));
    console.log(data); // <-- still has the correct data
    d3.select('.diagrammContainer svg').datum(data).call(chart);
    return chart;
});

我也试图改变 

chart.yAxis
        .tickFormat(d3.format('d'));

自

chart.yAxis
        .tickFormat(d3.format(',f'));

在 y 轴上显示浮点数。但是这些值仍然不正确。我也不明白为什么它会将几个数字转换为负数。

代码中的两个控制台.log输出正确的值。D3.js/NVD3.js如何处理图表看起来像这样的数字？结果

因此，在尝试调试了一段时间后，我做了一些谷歌搜索。这是我的两个发现：

  • 从中创建图表的数据值应该是对象而不是数组，因此您希望..."values":[{ x: 1446505200, y: 92},... 而不是 {"key":"Anmeldungen","values":[[1446505200,92],... 。在更改此设置时，您还需要更改.x()和.y()函数以分别返回 d.x*1000 和 d.y 。

  • 显然，nvd3累积折线图对y值的错误处理是一个已知问题，但是如果您将其更改为折线图（即 var chart = nv.models.cumulativeLineChart() var chart = nv.models.lineChart() ），它将正确解析 y 值。

我冒昧地创建了一个片段，演示它如何与替换为{x:_, y:_}对象的数据值数组一起工作，如果您想使用它，这是我从 github 问题线程中修改的数据的 jsfiddle

。

var data = [{"key":"AN","values":[[1446505200,92],[1447023600,112],[1447542000,361],[1448665200,6],[1449183600,10],[1449788400,2],[1449961200,3],[1450738800,4],[1451343600,9],[1451689200,2],[1452294000,7],[1452380400,5],[1453330800,7],[1453849200,2],[1454540400,4],[1454799600,7]]},{"key":"AB ","values":[[1446505200,223],[1447023600,264],[1447542000,82],[1448665200,0],[1449183600,0],[1449788400,0],[1449961200,0],[1450738800,0],[1451343600,0],[1451689200,0],[1452294000,0],[1452380400,0],[1453330800,2],[1453849200,0],[1454540400,0],[1454799600,0]]}];
for (var i = 0; i < data.length; i++) {
	for (var j = 0; j < data[i].values.length; j++) {
  	data[i].values[j] = {
    	x: data[i].values[j][0], 
      y: data[i].values[j][1]
    };
  }
}
console.log(data);
window.nv.addGraph(function() {
		var chart = nv.models.lineChart()
                .x(function(d) {return d.x*1000})
                .y(function(d) {return d.y}) 
				.useInteractiveGuideline(true)
				.width($('#cumulative-test').width())
				.height($('#cumulative-test').height())
			    .color(d3.scale.category10().range());
	
				chart.xAxis
				.tickFormat(function(d) {
					return d3.time.format('%x')(new Date(d))
				});
    
				chart.yAxis.tickFormat(d3.format('d'));
	
				d3.select("#cumulative-test svg").datum(getData()).call(chart);
	
				nv.utils.windowResize(updateChart);
						
				function updateChart() {
					chart.width($("#cumulative-test svg").width())
					chart.height($("#cumulative-test svg").height());
					chart.update();
				}
	
				return chart;		
    
    function getData() {
        return data;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.js"></script>
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.css" />
<div id="cumulative-test" style="width:100%; height:50%;">
	<svg></svg>
</div>

相关文章：