Question

从1950年到1995年，我每月都有一个非常基本的SOI值时间序列数据集。日期soi

1-Dec-94    2.993
1-Nov-94    1.293
1-Oct-94    -1.006
1-Sep-94    -0.80696
1-Aug-94    -1.406
1-Jul-94    -0.20696
1-Jun-94    -2.006
1-May-94    -0.90696
1-Apr-94    -1.806
1-Mar-94    -2.006
1-Feb-94    -1.306
1-Jan-94    -1.306
1-Dec-93    -1.706
1-Nov-93    -1.506
1-Oct-93    0.29374
1-Sep-93    -0.60696
1-Aug-93    1.2937

这就是它的样子。

我想创建一个简单的基于Dimple的线条图形。这是我的代码：

<div id="chartContainer">  
  <script type="text/javascript" src="d3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
// This loads in dimple and d3 libraries
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 1000, 600);
    d3.csv("SOI_data.csv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 800, 550);
      var x = myChart.addTimeAxis("x", "date", "%d-%b-%y", "%b-%y");
      x.addOrderRule("date");
      x.timeInterval = 4;
      myChart.addMeasureAxis("y", "soi");
      var s = myChart.addSeries(null, dimple.plot.line);
      myChart.draw();

    });
  </script>
</div>

它执行但输出非常奇怪。它显示从1月69日到12月94日的数据然后有一个很大的间隙（连接线之间）到1月50日，然后继续正确，直到12月68日。显示全天，它只显示两半（带有连接线）。我不知道如何显示图像，或者我只想说：数据是按顺序绘制成两个块的，没有特别的原因。如果需要，我将包括任何其他信息，这是我的第一个stackover流程帖子，所以感谢您的帮助！

Answer 1

引擎盖下的凹坑使用d3.time.format来解析时间。它必须做出选择：是“1月12日 - 50日”，2050年还是1950年？选择2050：

> format = d3.time.format("%d-%b-%y")
> format.parse("1-Dec-50")
  Thu Dec 01 2050 00:00:00 GMT-0500 (Eastern Standard Time)

最简单的修复方法是修改源数据以包含世纪。

时间跳跃在酒窝线图形

1 个答案: