How to format x axis with date in d3js
<p>thx in advance , i am working on how to display datas from a node module called google-finance, so, i have found a way to draw a linear graph chart but as i am new to d3 i don't know how to display the dates with this format</p>

<pre><code>      "date": "2014-12-30T23:00:00.000Z",
      "open": 112.82,
      "high": 113.13,
      "low": 110.21,
      "close": 110.38,
      "volume": 41403351,
      "symbol": "NASDAQ:AAPL"
</code></pre>

<p>here is the repo <a href="https://github.com/thefailtheory/ANN-Stock-Prediction" rel="nofollow noreferrer">https://github.com/thefailtheory/ANN-Stock-Prediction</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function InitChart() {
  /*
  TODO: parse date as the original format from google finance
  */
var stock = [{
            "date": "2010",
            "open": 113.79,
            "high": 114.77,
            "low": 113.7,
            "close": 113.91,
            "volume": 27598920,
            "symbol": "NASDAQ:AAPL"
        },
        {
            "date": "2011",
            "open": 113.64,
            "high": 113.92,
            "low": 112.11,
            "close": 112.52,
            "volume": 29881477,
            "symbol": "NASDAQ:AAPL"
        },
        {
            "date": "2012",
            "open": 112.82,
            "high": 113.13,
            "low": 110.21,
            "close": 110.38,
            "volume": 41403351,
            "symbol": "NASDAQ:AAPL"
        }
    ];

var stockGoogleFinance = [
  {
          "date": "2014-12-28T23:00:00.000Z",
          "open": 113.79,
          "high": 114.77,
          "low": 113.7,
          "close": 113.91,
          "volume": 27598920,
          "symbol": "NASDAQ:AAPL"
      },
      {
          "date": "2014-12-29T23:00:00.000Z",
          "open": 113.64,
          "high": 113.92,
          "low": 112.11,
          "close": 112.52,
          "volume": 29881477,
          "symbol": "NASDAQ:AAPL"
      },
      {
          "date": "2014-12-30T23:00:00.000Z",
          "open": 112.82,
          "high": 113.13,
          "low": 110.21,
          "close": 110.38,
          "volume": 41403351,
          "symbol": "NASDAQ:AAPL"
      }
];
var vis = d3.select("#visualisation"),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
    },
    xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2010, 2015]),
    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([100, 200]),
    xAxis = d3.svg.axis()
    .scale(xScale),
    yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);
vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);
var lineGen = d3.svg.line()
    .x(function(d) {
        return xScale(d.date);
    })
    .y(function(d) {
        return yScale(d.close);
    })
    .interpolate("basis");
vis.append('svg:path')
    .attr('d', lineGen(stock))
    .attr('stroke', 'blue')
    .attr('stroke-width', 2)
    .attr('fill', 'none');
}
InitChart();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;


    &lt;link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"&gt;

    &lt;link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet"&gt;

    &lt;style&gt;
        .axis path {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: Lato;
            font-size: 13px;
        }
    &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;

&lt;div class="container"&gt;

&lt;div class="jumbotron"&gt;

&lt;svg id="visualisation" width="1000" height="500"&gt;&lt;/svg&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>