使用数组绘制D3简单折线图 [英] Draw D3 Simple Line chart With an Array
问题描述
我正在尝试实施此代码: http://bl.ocks.org/3883245 ,但我没有加载TSV文件,而是从数组中加载数据。
以下是数组的样子:
I am Trying to Implement this code: http://bl.ocks.org/3883245, but instead of loading a TSV file, i am loading the data from an array. Here is how the array looks Like:
[["2012-10-02",2],["2012-10-09", 2], ["2012-10-12", 2]]
然后我在其上应用此函数以获得CSV格式: var data = d3.csv.format(BigWordsDates2 [ArrayIndex]);
and then I applied this function on it to get CSV Format: var data = d3.csv.format(BigWordsDates2[ArrayIndex]);
但仍然没有任何显示。
以下是整个代码:我认为我没有那么远,但我一直在努力在它上面3天仍然无法让它工作:
Here is the whole code: I think I am not that far from getting it but I have been working on it for 3 days and still cant get it to work:
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 80 - margin.left - margin.right,
height = 80 - margin.top - margin.bottom;
var data = d3.csv.format(BigWordsDates2[ArrayIndex]);
var parseDate = d3.time.format("%Y-%b-%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.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.date); })
.y(function(d) { return y(d.close); });
var svg = d3.select("#Graph").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 + ")");
d3.csv.parseRows(data, function(data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = parseInt(d.close);
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});`
我想我也在做d.date的错误并且d.close也是我无法理解的。
I think I am also doing something wrong with the d.date and d.close but I can't figure it out either.
推荐答案
该图表使用以下格式的数据
The chart uses data in the following format
[{ date: '...', close: '...'},
{ date: '...', close: '...'}]
所以,你需要解析你的数组:
So, you need to parse your array:
// fix your data parser
var parseDate = d3.time.format("%Y-%m-%d").parse;
var arrData = [
["2012-10-02",200],
["2012-10-09", 300],
["2012-10-12", 150]];
// create a new array that follows the format
var data = arrData.map(function(d) {
return {
date: parseDate(d[0]),
close: d[1]
};
});
这是工作版本:http://jsfiddle.net/jaimem/T546B/
pd:取决于您可能需要修改<$ c $的数据c> y scale的域名。
pd: depending on the data you might have to modify your y
scale's domain.
这篇关于使用数组绘制D3简单折线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!