如何在d3js

时间：2016-12-09 16:52:27

标签： javascript node.js d3.js

提前，我正在研究如何从名为google-finance的节点模块显示数据，所以，我已经找到了绘制线性图表的方法但是因为我是d3的新手，我不知道如何以此格式显示日期

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

这里是回购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 个答案:

答案 0 :(得分：0)

这就是我现在拥有的东西

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>

相关问题
最新问题