Javascript。将长时间序列转换为序列中每一年的数据框答案

【问题标题】：Javascript. Convert long time series into a dataframe for each year in the seriesJavascript。将长时间序列转换为序列中每一年的数据框
【发布时间】：2016-02-07 17:56:35
【问题描述】：

我在这里问，因为我在互联网上找不到任何东西。

假设我有一个时间序列，其中包含从 2003 年到今天的每日价格，例如在 csv 文件中。

现在我想绘制一个 2016 年的折线图，另一个 2015 年的折线图以及 2011/15 年的范围。

我可能首先需要创建一种数据框，其中数据日/月将对齐并列。

Javascript 有工厂可以做吗？也许D3.js 有一些这样的工具？（我会将它用于我的图表）。

【问题讨论】：

标签： javascript d3.js charts time-series data-manipulation

【解决方案1】：

你可以使用这个用 D3.js 编写的代码：

var charts = {};

charts.linechart = function (options) {


  var __ = options || {};
  __.CHART_NAME = __.CHART_NAME || 'linechart';
  __.CONTAINER = __.CONTAINER || 'canvas-svg';


  __.WIDTH = __.WIDTH || 800;
  __.HEIGHT = __.HEIGHT || 800;
  __.MERGIN = __.MERGIN || {top: 20, right: 20, bottom: 30, left: 50}

  __.Y_AXIS_LABEL = __.Y_AXIS_LABEL || "Price ($)";
  __.X_DATA_PARSE = __.X_DATA_PARSE || d3.time.format("%d-%b-%y").parse;
  __.Y_DATA_PARSE = __.Y_DATA_PARSE || parseInt;
  __.Y_DATA_FORMAT = __.Y_DATA_FORMAT || d3.time.format("%b-%y");
  __.X_AXIS_COLUMN = __.X_AXIS_COLUMN || "date";
  __.Y_AXIS_COLUMN = __.Y_AXIS_COLUMN || "close";

  var margin = __.MERGIN,
    width = __.WIDTH - margin.left - margin.right,
    height = __.HEIGHT - margin.top - margin.bottom;

  var x = d3.time.scale()
    .range([0, width]);

  var y = d3.scale.linear()
    .range([height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(__.Y_DATA_FORMAT);

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

  var line = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
      return x(d.x_axis);
    })
    .y(function (d) {
      return y(d.y_axis);
    });


  this.render = function (data) {


    var svg = d3.select('#' + __.CONTAINER).append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr('class', __.CHART_NAME)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    data.forEach(function (d) {
      d.x_axis = __.X_DATA_PARSE(d[__.X_AXIS_COLUMN]);
      d.y_axis = __.Y_DATA_PARSE(d[__.Y_AXIS_COLUMN]);
    });

    x.domain(d3.extent(data, function (d) {
      return d.x_axis;
    }));
    y.domain(d3.extent(data, function (d) {
      return d.y_axis;
    }));

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text(__.Y_AXIS_LABEL);

    svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
  }


};

.bar {
  fill: #4682b4;
}
.chart-title {
  font-size: 18px;
  font-weight: bold;
}
.line {
  fill: none;
  stroke: #4682b4;
  stroke-width: 1.5px;
}

.axis text {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div>
    <div id="canvas-svg"></div>
</div>
<script>
window.onload = function () {

    (function () {


        var data = [
            {
                "date": "1-May-12",
                "close": 582.13
            },
            {
                "date": "30-Apr-12",
                "close": 583.98
            },
            {
                "date": "27-Apr-12",
                "close": 603.00
            },
            {
                "date": "26-Apr-12",
                "close": 607.70
            },
            {
                "date": "25-Apr-12",
                "close": 610.00
            },
            {
                "date": "24-Apr-12",
                "close": 560.28
            },
            {
                "date": "23-Apr-12",
                "close": 571.70
            },
            {
                "date": "20-Apr-12",
                "close": 572.98
            },
            {
                "date": "19-Apr-12",
                "close": 587.44
            },
            {
                "date": "18-Apr-12",
                "close": 608.34
            },
            {
                "date": "17-Apr-12",
                "close": 609.70
            },
            {
                "date": "16-Apr-12",
                "close": 580.13
            },
            {
                "date": "13-Apr-12",
                "close": 605.23
            },
            {
                "date": "12-Apr-12",
                "close": 622.77
            },
            {
                "date": "11-Apr-12",
                "close": 626.20
            },
            {
                "date": "10-Apr-12",
                "close": 628.44
            },
            {
                "date": "9-Apr-12",
                "close": 636.23
            },
            {
                "date": "5-Apr-12",
                "close": 633.68
            },
            {
                "date": "4-Apr-12",
                "close": 624.31
            },
            {
                "date": "3-Apr-12",
                "close": 629.32
            },
            {
                "date": "2-Apr-12",
                "close": 618.63
            },
            {
                "date": "30-Mar-12",
                "close": 599.55
            },
            {
                "date": "29-Mar-12",
                "close": 609.86
            },
            {
                "date": "28-Mar-12",
                "close": 617.62
            },
            {
                "date": "27-Mar-12",
                "close": 614.48
            },
            {
                "date": "26-Mar-12",
                "close": 606.98
            },
            {
                "date": "23-Mar-12",
                "close": 596.05
            },
            {
                "date": "22-Mar-12",
                "close": 599.34
            },
            {
                "date": "21-Mar-12",
                "close": 602.50
            },
            {
                "date": "20-Mar-12",
                "close": 605.96
            },
            {
                "date": "19-Mar-12",
                "close": 601.10
            },
            {
                "date": "16-Mar-12",
                "close": 585.57
            },
            {
                "date": "15-Mar-12",
                "close": 585.56
            },
            {
                "date": "14-Mar-12",
                "close": 589.58
            },
            {
                "date": "13-Mar-12",
                "close": 568.10
            },
            {
                "date": "12-Mar-12",
                "close": 552.00
            },
            {
                "date": "9-Mar-12",
                "close": 545.17
            },
            {
                "date": "8-Mar-12",
                "close": 541.99
            },
            {
                "date": "7-Mar-12",
                "close": 530.69
            },
            {
                "date": "6-Mar-12",
                "close": 530.26
            },
            {
                "date": "5-Mar-12",
                "close": 533.16
            },
            {
                "date": "2-Mar-12",
                "close": 545.18
            },
            {
                "date": "1-Mar-12",
                "close": 544.47
            },
            {
                "date": "29-Feb-12",
                "close": 542.44
            },
            {
                "date": "28-Feb-12",
                "close": 535.41
            },
            {
                "date": "27-Feb-12",
                "close": 525.76
            },
            {
                "date": "24-Feb-12",
                "close": 522.41
            },
            {
                "date": "23-Feb-12",
                "close": 516.39
            },
            {
                "date": "22-Feb-12",
                "close": 513.04
            },
            {
                "date": "21-Feb-12",
                "close": 514.85
            },
            {
                "date": "17-Feb-12",
                "close": 502.12
            },
            {
                "date": "16-Feb-12",
                "close": 502.21
            },
            {
                "date": "15-Feb-12",
                "close": 497.67
            },
            {
                "date": "14-Feb-12",
                "close": 509.46
            },
            {
                "date": "13-Feb-12",
                "close": 502.60
            },
            {
                "date": "10-Feb-12",
                "close": 493.42
            },
            {
                "date": "9-Feb-12",
                "close": 493.17
            },
            {
                "date": "8-Feb-12",
                "close": 476.68
            },
            {
                "date": "7-Feb-12",
                "close": 468.83
            },
            {
                "date": "6-Feb-12",
                "close": 463.97
            },
            {
                "date": "3-Feb-12",
                "close": 459.68
            },
            {
                "date": "2-Feb-12",
                "close": 455.12
            },
            {
                "date": "1-Feb-12",
                "close": 456.19
            },
            {
                "date": "31-Jan-12",
                "close": 456.48
            },
            {
                "date": "30-Jan-12",
                "close": 453.01
            },
            {
                "date": "27-Jan-12",
                "close": 447.28
            },
            {
                "date": "26-Jan-12",
                "close": 444.63
            },
            {
                "date": "25-Jan-12",
                "close": 446.66
            },
            {
                "date": "24-Jan-12",
                "close": 420.41
            },
            {
                "date": "23-Jan-12",
                "close": 427.41
            },
            {
                "date": "20-Jan-12",
                "close": 420.30
            },
            {
                "date": "19-Jan-12",
                "close": 427.75
            },
            {
                "date": "18-Jan-12",
                "close": 429.11
            },
            {
                "date": "17-Jan-12",
                "close": 424.70
            },
            {
                "date": "13-Jan-12",
                "close": 419.81
            },
            {
                "date": "12-Jan-12",
                "close": 421.39
            },
            {
                "date": "11-Jan-12",
                "close": 422.55
            },
            {
                "date": "10-Jan-12",
                "close": 423.24
            },
            {
                "date": "9-Jan-12",
                "close": 421.73
            },
            {
                "date": "6-Jan-12",
                "close": 422.40
            },
            {
                "date": "5-Jan-12",
                "close": 418.03
            },
            {
                "date": "4-Jan-12",
                "close": 413.44
            },
            {
                "date": "3-Jan-12",
                "close": 411.23
            }
        ];


        var options = {};
        var linechart = new charts.linechart(options);
        linechart.render(data);

    })();
};
  </script>

【讨论】：

要加载 csv 文件，您可以使用 d3.csv('', function(error, data) { code .. });