【问题标题】:TypeError: e.values is undefined in nvd3 graphTypeError: e.values 在 nvd3 图中未定义
【发布时间】:2017-04-26 16:37:39
【问题描述】:

我通过从外部 JSON 文件 (temp.json) 获取实时数据绘制了一个 nvd3 图表。这是我的代码。但我收到“TypeError: e.values is undefined”错误。

d3.json("temp.json", function(data) {

    data.forEach(function(d) {
        d.timestamp = +d.timestamp;
        d.timestamp3 = +d.timestamp3;

    });
nv.addGraph(function(){
var chart = nv.models.cumulativeLineChart()
                .margin({left: 100})
                .x(function(d){return d.timestamp})
                .y(function(d){return d.timestamp3})
                .color(d3.scale.category10().range())
                .useInteractiveGuideline(true)


chart.xAxis
    .axisLabel('Time in ns')
    .tickFormat(d3.format(""));

    chart.yAxis
        .axisLabel('Timestamp in ns')
        .tickFormat(d3.format(""));

    d3.select('#container svg')
        .datum(data)
        .call(chart);

    nv.utils.windowResize(chart.update);



    return chart;
});
});

我在 temp.json 中的数据:

[{
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1370718629900",
        "timestamp3": "1370718629945"
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718630000",
        "timestamp2": "1370718631000",
        "timestamp3": "1370718631500"
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718632000",
        "timestamp2": "1370718632500",
        "timestamp3": "1370718632600"
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718633000",
        "timestamp2": "1370718633500",
        "timestamp3": "1370718634000"
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718635000",
        "timestamp2": "1370718635500",
        "timestamp3": "1370718636000"
    }
]

什么是错误?以及如何获取时间戳与时间戳 3 的关系图?请帮帮我。

【问题讨论】:

    标签: json d3.js nvd3.js


    【解决方案1】:

    NVD3 要求数据采用以下格式:

    [
      {
         key: 'my dataset',
         values: [...]
      }
    ]
    

    你可以这样做:

    const processedData = [{
       key: 'my dataset',
       values: data
    }];
    
    d3.select('#container svg')
        .datum(processedData)
        .call(chart);
    

    【讨论】:

    • 我不能使用当前的 JSON 文件(temp.json)吗?绘制 nvd3 不是有效的 JSON 格式吗?
    • 因此应该使用这样的:[{ “键”: “时间戳”, “值”:[1370718629809,1370718629809,1370718629809,1370718629809,1370718629809,1370718629809,1370718629809,1370718629809,1370718629809,1370718629809, 1370718629809,1370718629809,1370718629809]},]
    • 您可以使用我在答案中提供的代码: const processesData = [{ key: 'my dataset', values: data }]; d3.select('#container svg') .datum(processedData) .call(chart);
    • 感谢它正在工作。如果我想在一个图中生成三条线(即时间戳、时间戳2、时间戳3),我应该如何取值?
    • 添加三个不同的系列。 const data = [{ key: 'series1', values: [..]}, { key: 'series2', values: [..]}, { key: 'series3', values: [..]}]
    猜你喜欢
    • 1970-01-01
    • 2016-11-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-21
    • 1970-01-01
    • 2018-06-01
    • 2020-06-02
    相关资源
    最近更新 更多