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()函数分别改成returnd.x*1000和d.y。
显然 nvd3 累积折线图 is a known issue 对 y 值的处理不当，但如果将其更改为折线图（即 var chart = nv.models.cumulativeLineChart() 到 var chart = nv.models.lineChart()), 它将正确解析 y 值。

我冒昧地创建了一个片段来演示它如何处理用 {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>

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

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

javascript

d3.js

charts

nvd3.js