【发布时间】：2016-12-09 16:52:26
【问题描述】：
提前谢谢，我正在研究如何显示来自名为 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>【问题讨论】：
-
我开始使用
Date.parse(d.date)，它似乎工作正常，但如果有其他解决方案，欢迎 -
您希望您的轴看起来如何？
2010 2011 2012 2013 2014 2015? -
我希望它们看起来像 ref 文件夹文章第 5 页 github.com/thefailtheory/ANN-Stock-Prediction/blob/master/refs/… 中的样子google-finance 节点模块给出的格式
-
不，我的意思是您希望刻度值仅显示年份还是
year-month-dates ？ -
试试这个
xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.time.year.range(new Date(2010, 0, 1), new Date(2016, 0, 1))).ticks(5)，但我认为在你的情况下，序数比例会更合适，因为你的域是离散的而不是连续的
标签： javascript node.js d3.js