Question

我正在尝试使用nvd3 lineWithFocusChart模型创建时间序列。我的数据是这样的对象数组：

[
    {
        "key": "red",
        "values": [
            {
                "date": "2015-06-17T11:00:00.000Z",
                "value": 17
            },
            ...]
    },
    {
        "key": "green",
        "values": [
            {
                "date": "2015-06-17T11:00:00.000Z",
                "value": 20
            },
            ...]
    },
]

我只想将date映射到x和value映射到y，查看其他示例通常是这样做的：

nv.addGraph(function() {
        var chart = nv.models.lineWithFocusChart()
            .x(function(d) { return new Date(d.daterun)})
            .y(function(d) { return d.value});
        chart.brushExtent([50,70]);
        chart.xAxis.tickFormat(d3.format(function(d) { 
          return d3.time.format('%x')(new Date(d));
        }));
        chart.x2Axis.tickFormat(d3.format(',f'));
        chart.yAxis.tickFormat(d3.format(',.2f'));
        chart.y2Axis.tickFormat(d3.format(',.2f'));
        chart.useInteractiveGuideline(true);
        d3.select('#chart svg')
            .datum(data)
            .call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });

但是.x(function(d) { return new Date(d.date)})我正在TypeError: d is undefined。

如何正确映射此图表模型的数据？

Answer 1

我已经从您提供的部分创建了以下代码我没有收到您所引用的错误，我的线条可能不会绘制，因为我只有两点数据。见下文：

<link href="libs/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="libs/nv.d3.js"></script>
<script src="libs/stream_layers.js"></script>

<body>
<div id="chart" class='with-3d-shadow with-transitions'>
<svg></svg>
</div>

<script>

nv.addGraph(function() {
    var chart = nv.models.lineWithFocusChart()
        .x(function(d) { return new Date(d.date)})
        .y(function(d) { return d.value});
    chart.brushExtent([50,70]);
    chart.xAxis.tickFormat(d3.format(function(d) {
      return d3.time.format('%x')(new Date(d.date));
    }));
    chart.x2Axis.tickFormat(d3.format(',f'));
    chart.yAxis.tickFormat(d3.format(',.2f'));
    chart.y2Axis.tickFormat(d3.format(',.2f'));
    chart.useInteractiveGuideline(true);
    d3.select('#chart svg')
        .datum(data())
        .call(chart);
    nv.utils.windowResize(chart.update);
    return chart;
});

function data() {
  return [
      {
          "key": "red",
          "values": [
              {
                  "date": "2015-06-17T11:00:00.000Z",
                  "value": 17
              },
              {
                  "date": "2015-06-17T11:00:00.000Z",
                  "value": 18
              },
              ]
      },
      {
          "key": "green",
          "values": [
              {
                  "date": "2015-06-17T11:00:00.000Z",
                  "value": 20
              },
              {
                  "date": "2015-06-17T11:00:00.000Z",
                  "value": 17
              },
              ]
      }
]
}

</script>
</body>

我发现唯一错误的是您将日期数据点称为＆＃34; d.daterun＆＃34;在数据中＆＃34;日期＆＃34;应该是＆＃34; d.date＆＃34;在代码中。

希望这有帮助。

lineWithFocusChart时间序列的地图数据

1 个答案: