D3.js 带有FocusChart时间序列的线路的地图数据_D3.js_Nvd3.js

D3.js 带有FocusChart时间序列的线路的地图数据

d3.js

D3.js 带有FocusChart时间序列的线路的地图数据,d3.js,nvd3.js,D3.js,Nvd3.js,我正在尝试使用nvd3 lineWithFocusChart模型创建一个timeseries。我的数据是如下所示的对象数组： [ { "key": "red", "values": [ { "date": "2015-06-17T11:00:00.000Z", "value": 17 }, ...] },

我正在尝试使用nvd3 lineWithFocusChart模型创建一个timeseries。我的数据是如下所示的对象数组：

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

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，将值映射到y，查看其他示例通常是这样做的：

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

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

但是在.xfunction上{returnnew Dated.date}我得到了TypeError:d是未定义的

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

我已根据您提供的零件创建了以下代码，我没有收到您提到的错误，我的线条可能没有绘制，因为我只有两个数据点。见下文：

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

我发现的唯一错误是，您将日期数据点引用为d.daterun，而在数据中引用为date，这在代码中应该是d.date

希望这能有所帮助。

我认为在将数据分配到图表之前，您无法从模型中映射数据。检查第33行之间的代码-51@Alex_B但是他们在86行，87行的类似图表中绘制了它？也许图表模型的工作方式有所不同？您是否可以包含更多的代码，以查看如何使用类似于d3的代码初始化图表。选择“chart1”。datumdata.CallChart如果您检查控制台，您将看到与此相同的错误，或至少类似的错误。将第二个日期更改为18号，单击画笔后，您将看到线条。我看到了线条，但我没有在控制台中使用我提供的代码发现错误。它看起来像此图表。useInteractiveGuidelinetrue；当您将鼠标悬停在图表上时，会导致问题。查看小提琴你测试的是什么版本？Chrome 43.0.2357.130 64位版本