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

Question

我是 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 轴上显示浮点数。但值仍然不正确。我也不明白为什么它将一些数字转换为负数。

代码中的两个 console.log 都输出正确的值。 D3.js / NVD3.js 对图表看起来像这样的数字有什么作用？ result

Answer 1

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

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

• 显然 nvd3 累积折线图 is a known issue 对 y 值的处理不当，但如果将其更改为 lineChart（即 var chart = nv.models.cumulativeLineChart() 到 var chart = nv.models.lineChart()），它将解决 y 值正确。

我冒昧地创建了一个 sn-p，演示了它如何处理用 {x:_, y:_} 对象和 here is a jsfiddle 替换的数据值数组，我从 github 问题线程中修改了你的数据，如果你'想玩玩。

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>