file - Waiting for finish reading a data in javascript -
i using d3.js read data tsv file,but found there strange in procedure,i read data , push each line array called dataset , want calculate variable total using loop,but seems fail(there no datum in dataset),maybe because javascript going on without waiting finish reading file.the code here:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>this te</title> </head> <body> <script src="http://d3js.org/d3.v3.min.js" type="text/javascript" charset="utf-8"></script> <script src="fun.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var dataset = new array(); var parsedate = d3.time.format('%y-%b-%e').parse; d3.tsv("data.tsv",function(error,data){ for(var in data){ //console.log(data[i].date); //console.log(parsedate(data[i].date)); var elapse = (i == 0) ? 0 : dateelapse(parsedate(data[i-1].date),parsedate(data[i].date)); dataset.push({ date : parsedate(data[i].date), state : data[i].state, elapse : elapse }); } }); var total = 0; for(var in dataset){ total =total + dataset[i].elapse; } console.log(total); var tau = math.pi * 2; var width = 960,height = 500; var svg = d3.select("body").append("svg").attr({ "width" : width, "height": height, }); var container = svg.append("g").attr({ "transform":"translate(" + width / 2 + "," + height / 2+ ")" }); var arc = d3.svg.arc() .innerradius(180) .outerradius(240) .startangle(0); var background = container.append("path") .datum({endangle: tau}) .style("fill","#ddd") .attr("d",arc) var foreground = container.append("g").append("path") .datum({endangle: 0.25 * tau}) .style("fill","#ffa500") .attr("d",arc) </script> </body> </html> fun.js：
var month = [31,28,31,30,31,30,31,31,30,31,30,31]; var millseconds_per_day = 86400000; function getdateparser(specifier) { return d3.time.format(specifier).parse; } function day( ) { return this.getdate(); } function month() { return this.getmonth(); } function year( ) { return this.getfullyear(); } function dateelapse(start,end) { return math.ceil((end - start) / millseconds_per_day); } function loadtsv(file,arr){ arr = new array(); d3.tsv(file,function(error,data){ var parser = getdateparser("%y-%b-%e"); for(var in data){ var elapse = (i == 0) ? 0 : dataelapse(parser(data[i-1].date,parser(data[i].data))); arr.push({ date : parser(data[i].data), state: data[i].state, elapse : elapse }) } }); } and data file:
date state 2014-may-12 task1 2014-may-25 task2 2014-jun-28 tsak3 notice:the tsv file should separate every datum tab,assure paste code doesn`t change that,that may cause fail reading.
i kown skill like:
var reader = new filereader(); read.onload=... but don`t kown in situation.
the easiest fix move total calculation inside tsv callback function.
d3.tsv("data.tsv",function(error,data){ for(var in data) { ... } var total = 0; for(var in dataset){ total =total + dataset[i].elapse; } console.log(total); }); note javascript asynchronized language callback function doesn't block rest of code running, , since loading data.tsv file needs i/o operations lines after callback run before callback function , time array still empty.
Comments
Post a Comment