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

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

您创建图表的数据值应该是对象而不是数组，因此您需要{"key":"Anmeldungen","values":[[1446505200,92],...而不是..."values":[{ x: 1446505200, y: 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值。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: