javascript d3中json数据的折线图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27148545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
line chart of json data in d3
提问by user1915636
I am learning d3. I want to make a line chart using json data. The data I am using is:
我正在学习 d3。我想使用 json 数据制作折线图。我使用的数据是：
var data = [
{ "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
{ "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
{ "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
{ "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
{ "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
{ "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}];
I want "at" on x axis and "value" on y axis. Also I need to parse the "at" as time only. Please provide me pointers how i will proceed further. The code till now I have implemented is below. I tried to look for documentation for this but found none.
我想要 x 轴上的“at”和 y 轴上的“value”。此外，我只需要将“at”解析为时间。请为我提供指示，我将如何进一步进行。到目前为止我已经实现的代码如下。我试图为此寻找文档，但没有找到。
<html>
<head>
<title>line chart on json</title>
<script src="http://d3js.org/d3.v2.js"></script>
<style>
/* tell the SVG path to be a thin blue line without any area fill */
path {
stroke: steelblue;
stroke-width: 1;
fill: none;
}
</style>
</head>
<body>
<script>
var width = 400;
var height = 150;
var data = [
{ "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
{ "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
{ "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
{ "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
{ "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
{ "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}];
var x = d3.scale.ordinal();
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var line = d3.svg.line()
.x(function(d) { return x(d.at);})
.y(function(d) { return y(d.value); })
.interpolate("linear")
var graph = d3.select(graph1).append("svg:svg").attr("width", "300"). attr("height", "150");
function make_y_axis() {
return d3.svg.axis().scale(y).orient("left").ticks(5)
}
</script>
</body>
</html>
采纳答案by iurii_n
Look at this example http://bl.ocks.org/crayzeewulf/9719255
看这个例子http://bl.ocks.org/crayzeewulf/9719255
There used 2 graphs, but you can use just one and place data as you want.
使用了 2 个图，但您可以只使用一个并根据需要放置数据。
As for date you can look at this example http://jsfiddle.net/robdodson/KWRxW/, xAxis in particular.
至于日期，您可以查看此示例http://jsfiddle.net/robdodson/KWRxW/，尤其是 xAxis。
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(d3.time.days, 1)
.tickFormat(d3.time.format('%a %d'))
.tickSize(0)
.tickPadding(8);
回答by CodingbyRaj
What is graph1 in the below line:
下面一行中的graph1是什么：
var graph = d3.select(graph1).append("svg:svg").attr("width", "300"). attr("height", "150");
var graph = d3.select(graph1).append("svg:svg").attr("width", "300"). attr("高度", "150");
