如何从d3.js中给定的对象数组中获取数据 [英] How to get the data from given array of objects in d3.js
本文介绍了如何从d3.js中给定的对象数组中获取数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我困惑了如何从数组中的对象获取数据，我已经开发了线图，但x轴问题正在提高，如何解决问题，我的对象如下。
I have confused for the how to get the data from objects in arrays and I had developed for the line graph but x-axis problem is raising, how to solve the problem, my object is given below.
var data=[{"key":[2009,0],"value":200},{"key":[2009,1],"value":201},{"key":[2009,2],"value":204},{"key":[2009,3],"value":204},{"key":[2009,4],"value":206},{"key":[2009,5],"value":200},{"key":[2009,6],"value":100},{"key":[2009,7],"value":208},{"key":[2009,8],"value":600},{"key":[2009,9],"value":290},{"key":[2009,10],"value":270},{"key":[2009,11],"value":400},
{"key":[2010,0],"value":200},{"key":[2010,1],"value":201},{"key":[2010,2],"value":204},{"key":[2010,3],"value":204},{"key":[2010,4],"value":206},{"key":[2010,5],"value":200},{"key":[2010,6],"value":100},{"key":[2010,7],"value":208},{"key":[2010,8],"value":600},{"key":[2010,9],"value":290},{"key":[2010,10],"value":270},{"key":[2010,11],"value":400},
{"key":[2011,0],"value":200},{"key":[2011,1],"value":201},{"key":[2011,2],"value":204},{"key":[2011,3],"value":204},{"key":[2011,4],"value":206},{"key":[2011,5],"value":200},{"key":[2011,6],"value":100},{"key":[2011,7],"value":208},{"key":[2011,8],"value":600},{"key":[2011,9],"value":290},{"key":[2011,10],"value":270},{"key":[2011,11],"value":400}];
var parseDate = d3.time.format("%x").parse
//console.log(data);
//data.forEach(function (d){
//d.key=d.key[1];
//d.value=d.value;
//})
var s1=data.map(function (d,i){return {key:d.key[0],value:d.value}})
console.log(s1);
var margin = {top: 15, right: 20, bottom: 70, left: 85},
width = 440,height = 450;
var x=d3.time.scale().domain(d3.extent(s1,function (d,i){return d.key[1]}))
.range([0,width])
var y=d3.scale.linear().domain(d3.extent(s1,function (d,i){return d.value}))
.range([height,0])
var xAxis = d3.svg.axis().scale(x).orient("bottom")
var yAxis = d3.svg.axis().scale(y).orient("left")
var line = d3.svg.line()
.x(function(d) { return x(d.key); })
.y(function(d) { return y(d.value); })
.interpolate("cardinal")
var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body").select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.append("g")
.attr("class", "x axis x-axis")
.attr("transform", "translate(0," + height + ")").attr("fill","steelblue")
.call(xAxis);
svg.append("g").attr("class", "y axis y-axis").attr("fill","steelblue").call(yAxis)
svg.append("path").attr("class", "line").attr("d", line(s1));
推荐答案
下面通过调整您的代码找到一个折线图。确保语句以分号结尾。
Below you find a line graph by adjusting your code. Make sure the statements end with semicolons according to the convention.
您的变量s1未正确创建，最后查看如何正确添加该行。
Your variable s1 was not created correctly and at the end look how the line is appended correctly.
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data=[{"key":[2009,0],"value":200},{"key":[2009,1],"value":201},{"key":[2009,2],"value":204},{"key":[2009,3],"value":204},{"key":[2009,4],"value":206},{"key":[2009,5],"value":200},{"key":[2009,6],"value":100},{"key":[2009,7],"value":208},{"key":[2009,8],"value":600},{"key":[2009,9],"value":290},{"key":[2009,10],"value":270},{"key":[2009,11],"value":400},
{"key":[2010,0],"value":200},{"key":[2010,1],"value":201},{"key":[2010,2],"value":204},{"key":[2010,3],"value":204},{"key":[2010,4],"value":206},{"key":[2010,5],"value":200},{"key":[2010,6],"value":100},{"key":[2010,7],"value":208},{"key":[2010,8],"value":600},{"key":[2010,9],"value":290},{"key":[2010,10],"value":270},{"key":[2010,11],"value":400},
{"key":[2011,0],"value":200},{"key":[2011,1],"value":201},{"key":[2011,2],"value":204},{"key":[2011,3],"value":204},{"key":[2011,4],"value":206},{"key":[2011,5],"value":200},{"key":[2011,6],"value":100},{"key":[2011,7],"value":208},{"key":[2011,8],"value":600},{"key":[2011,9],"value":290},{"key":[2011,10],"value":270},{"key":[2011,11],"value":400}];
var parseDate = d3.time.format("%x").parse;
// construct the date according to the parsed format: %m/%d/%Y
var s1 = data.map(function (d,i){return {key:parseDate((d.key[1]+1)+"/1/"+d.key[0]),value:+d.value}});
console.log(s1);
var margin = {top: 15, right: 20, bottom: 70, left: 85},
width = 440,height = 450;
var x = d3.time.scale().domain(d3.extent(s1,function (d,i){return d.key}))
.range([0,width]);
var y = d3.scale.linear().domain(d3.extent(s1,function (d,i){return d.value}))
.range([height,0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.key); })
.y(function(d) { return y(d.value); })
.interpolate("cardinal");
var div = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis x-axis")
.attr("transform", "translate(0," + height + ")")
.attr("fill","steelblue")
.call(xAxis);
svg.append("g")
.attr("class", "y axis y-axis")
.attr("fill","steelblue")
.call(yAxis);
svg.append("path")
.datum(s1)
.attr("class", "line")
.attr("d", line);
</script>
</body>
</html>
这篇关于如何从d3.js中给定的对象数组中获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
