stackoom
  简体   繁体   中英

How to format x axis with date in d3js

 原文  2016-12-09 16:52:26  4   1    javascript/ node.js/ d3.js

Question

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 

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

here is the repo https://github.com/thefailtheory/ANN-Stock-Prediction 

 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(); 
 <!DOCTYPE html> <html lang="en"> <head> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet"> <style> .axis path { fill: none; stroke: #777; shape-rendering: crispEdges; } .axis text { font-family: Lato; font-size: 13px; } </style> </head> <body> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <div class="container"> <div class="jumbotron"> <svg id="visualisation" width="1000" height="500"></svg> </div> </div> </body> </html>

1 answers

solution1
 0  2016-12-09 18:12:32

here is what i have for the moment 

 function InitChart() { /* TODO: parse date as the original format from google finance */ var stockGoogleFinance = [ { "date": "2014-12-11T23:00:00.000Z", "open": 110.46, "high": 111.87, "low": 109.58, "close": 109.73, "volume": 56028138, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-14T23:00:00.000Z", "open": 110.7, "high": 111.6, "low": 106.35, "close": 108.22, "volume": 67218082, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-15T23:00:00.000Z", "open": 106.37, "high": 110.16, "low": 106.26, "close": 106.74, "volume": 60790733, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-16T23:00:00.000Z", "open": 107.12, "high": 109.84, "low": 106.82, "close": 109.41, "volume": 53411773, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-17T23:00:00.000Z", "open": 111.87, "high": 112.65, "low": 110.66, "close": 112.65, "volume": 59006218, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-18T23:00:00.000Z", "open": 112.26, "high": 113.24, "low": 111.66, "close": 111.78, "volume": 88429770, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-21T23:00:00.000Z", "open": 112.16, "high": 113.49, "low": 111.97, "close": 112.94, "volume": 45167549, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-22T23:00:00.000Z", "open": 113.23, "high": 113.33, "low": 112.46, "close": 112.54, "volume": 26028419, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-23T23:00:00.000Z", "open": 112.58, "high": 112.71, "low": 112.01, "close": 112.01, "volume": 14479611, "symbol": "NASDAQ:AAPL" }, { "date": "2014-12-25T23:00:00.000Z", "open": 112.1, "high": 114.52, "low": 112.01, "close": 113.99, "volume": 33720951, "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]), // Set the scales // Set the scales //Date.parse is fine for the moment minDate = d3.min(stockGoogleFinance, function(d) { return Date.parse(d.date); }); maxDate = d3.max(stockGoogleFinance, function(d) { return Date.parse(d.date); }); xScale = d3.time.scale() .domain([minDate, maxDate]) .range([MARGINS.left, WIDTH - MARGINS.right]); console.log(minDate, maxDate); yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([100, 200]), /* xAxis = d3.svg.axis() .scale(xScale), */ // x-axis format = d3.time.format("%d %b %y"); xAxis = d3.svg.axis() .scale(xScale) .tickFormat(format) .ticks(d3.time.days, 1); 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(Date.parse(d.date)); }) .y(function(d) { return yScale(d.close); }) // .interpolate("basis"); vis.append('svg:path') .attr('d', lineGen(stockGoogleFinance)) .attr('stroke', 'blue') .attr('stroke-width', 2) .attr('fill', 'none'); } InitChart(); 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet"> <style> .axis path { fill: none; stroke: #777; shape-rendering: crispEdges; } .axis text { font-family: Lato; font-size: 13px; } </style> </head> <body> <div class="container"> <div class="jumbotron"> <svg id="visualisation" width="1000" height="500"></svg> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </div> </div> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to spcify ticks on x axis for time scale in d3js? Updating x axis d3js D3js: How to generate X axis labels/ticks if data for one of axis is 0? printing date in different format on x-axis in d3.js D3js, particular format for Time axis labels D3js change ticks x and y axis D3js X axis label style justify to left D3js increase space between X axis D3js X AXIS time - out of range d3js: Replace a particular tick value on X-Axis
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM