javascript - Asynchronously loading new data to a d3 chart -
i'm building sort of timeline tool using d3.js can zoomed , paged forward , within set time period. have axis transitioning can't seem data reload. idea zoom level defines moving window, example 1 hour user moves backwards , forwards on period of few days. every time call made fetch data hour.
apologies large code block, methods handle fetching of new data towards bottom. if makes difference tool directive angular.js.
scope.zoomlevels = [ { value: 1, unit: 'minutes', tickformat: $window.d3.time.format('%s') }, { value: 30, unit: 'minutes', tickformat: $window.d3.time.format('%h:%m') }, { value: 1, unit: 'hours', tickformat: $window.d3.time.format('%h:%m') }, { value: 3, unit: 'hours', tickformat: $window.d3.time.format('%h:%m') }, { value: 6, unit: 'hours', tickformat: $window.d3.time.format('%h:%m') }, { value: 12, unit: 'hours', tickformat: $window.d3.time.format('%h:%m') }, { value: 1, unit: 'days', tickformat: $window.d3.time.format('%h:%m') } ]; var margin = {top: 0, right: 0, bottom: 0, left: 0}, width = $window.innerwidth, height = $window.innerheight - margin.top - margin.bottom, xaxisheight = $window.innerheight - margin.top - ($window.innerheight/2); var start = $window.moment(datasets.current.dates[0], 'dd/mm/yyyy'), end = $window.moment(datasets.current.dates[datasets.current.dates.length - 1], 'dd/mm/yyyy'), duration = $window.moment.duration(end.diff(start)); scope.zoomlevel = 3; scope.page = 0; scope.maxpage = duration.asminutes()/scope.zoomlevels[scope.zoomlevel].value; //$scope.tweets = tweets.gettweets(start.format('x'), end.format('x')); var rows = math.floor(height/ 60); console.log(rows + ' rows'); var x = $window.d3.time.scale() .domain([start.todate(), start.clone().add(scope.zoomlevels[scope.zoomlevel].value, scope.zoomlevels[scope.zoomlevel].unit).todate()]) .range([0, width]); var y = $window.d3.scale.linear() .domain([(rows/2) * -1,(rows/2)]) .range([height, 0]); var xaxis = $window.d3.svg.axis() .scale(x); var yaxis = $window.d3.svg.axis() .scale(y) .ticksize(5) .orient('right'); var svg = $window.d3.select('#timeline').append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + xaxisheight + ')') .call(xaxis) .selectall('text') .attr('y', 15) .attr('x', 0) .attr('dy', '.35em'); svg.append('g') .attr('class', 'y axis') .call(yaxis); articles.get({startdate: start.format(), enddate: start.clone().add(scope.zoomlevels[scope.zoomlevel].value, scope.zoomlevels[scope.zoomlevel].unit).format(), limit: 20}, function(data){ var bar = svg.selectall('.news') .data(data.items) .enter() .append('g') .attr('class', 'news') .on('mouseover', function(d) { console.log(d); }) .on('mouseout', function(d) { }); bar.append('rect') .attr('width', 250) .attr('height', 60) .attr('x', function(d){return x($window.moment(d.date, 'yyyy-mm-ddthh:mm:ss.000z').format('x'));}) .attr('y', function(d){return y(2);}) bar.append('foreignobject') .attr('width', 250) .attr('height', 60) .attr('x', function(d){return x($window.moment(d.date, 'yyyy-mm-ddthh:mm:ss.000z').format('x'));}) .attr('y', function(d){return y(2);}) .append('xhtml:p') .attr("class","statement") .text(function(d) { return d.title; }); }); scope.movepage = function(direction){ if(!(direction === 1 && scope.page === scope.maxpage) || !(direction === -1 && scope.page === 0)){ console.log('paging allowed'); if(direction === 1){ start = start.add(scope.zoomlevels[scope.zoomlevel].value, scope.zoomlevels[scope.zoomlevel].unit); x.domain([start.todate(), start.clone().add(scope.zoomlevels[scope.zoomlevel].value, scope.zoomlevels[scope.zoomlevel].unit).todate()]); articles.get({startdate: start.format(), enddate: start.clone().add(scope.zoomlevels[scope.zoomlevel].value, scope.zoomlevels[scope.zoomlevel].unit).format(), limit: 20}, function(data) { console.log(data.items.length); svg.selectall('.news').data(data.items).transition().duration(1500).ease('sin-in-out'); svg.selectall('g.axis.x').transition().duration(1500).ease('sin-in-out').call(xaxis); }); scope.page++; } if(direction === -1){ start = start.subtract(scope.zoomlevels[scope.zoomlevel].value, scope.zoomlevels[scope.zoomlevel].unit); x.domain([start.todate(), start.clone().add(scope.zoomlevels[scope.zoomlevel].value, scope.zoomlevels[scope.zoomlevel].unit).todate()]); svg.selectall('g.axis.x').transition().duration(1500).ease('sin-in-out').call(xaxis); scope.page--; } } }; scope.togglezoom = function(direction){ if(!(direction === 1 && scope.zoomlevel === 6) || !(direction === -1 && scope.zoomlevel === 0)){ duration = $window.moment.duration(end.diff(start)); scope.zoomlevel = scope.zoomlevel + direction; console.log(scope.zoomlevels[scope.zoomlevel].unit); switch (scope.zoomlevels[scope.zoomlevel].unit){ case 'minutes': scope.maxpage = duration.asminutes()/scope.zoomlevels[scope.zoomlevel].value; console.log(duration.asminutes() + ' minutes'); console.log((duration.asminutes()/scope.zoomlevels[scope.zoomlevel].value) + ' pages'); break; case 'hours': scope.maxpage = duration.ashours()/scope.zoomlevels[scope.zoomlevel].value; console.log(duration.ashours() + ' hours'); console.log((duration.ashours()/scope.zoomlevels[scope.zoomlevel].value) + ' pages'); break; case 'days': scope.maxpage = duration.asdays()/scope.zoomlevels[scope.zoomlevel].value; console.log(duration.asdays() + ' days'); console.log((duration.asdays()/scope.zoomlevels[scope.zoomlevel].value) + ' pages'); break; } x.domain([start.todate(), start.clone().add(scope.zoomlevels[scope.zoomlevel].value, scope.zoomlevels[scope.zoomlevel].unit).todate()]); svg.selectall('g.axis').transition().duration(1500).ease('sin-in-out').call(xaxis); } }; update #1
i've been able new data appear , older data removed using following code in articles.get callback after line console.log(data.items.length)
var news = svg.selectall(".news").data(data.items); // add new element news.enter() .append("g") .attr("class", "news") .transition() .duration(1500) .ease("sin-in-out"); news.append('rect') .attr('width', 250) .attr('height', 60) .attr('x', function(d){return x($window.moment(d.date, 'yyyy-mm-ddthh:mm:ss.000z').format('x'));}) .attr('y', function(d){return y(2);}); news.append('foreignobject') .attr('width', 250) .attr('height', 60) .attr('x', function(d){return x($window.moment(d.date, 'yyyy-mm-ddthh:mm:ss.000z').format('x'));}) .attr('y', function(d){return y(2);}) .append('xhtml:p') .attr("class","statement") .text(function(d) { return d.title; }); // remove old elements news.exit() .attr("class", "news") .transition() .duration(1500) .ease("sin-in-out") .remove(); however animations don't work. want svg elements represent each news item move left @ same pace axis moves if user clicks next page. appear/disappear instantly user clicks forward , buttons.
if(!(direction === 1 && scope.page === scope.maxpage) || !(direction === -1 && scope.page === 0)){ if(direction === 1){ ... } if(direction === -1){ .. } this not easy parse, sure it's possible either of inner code blocks execute given conditionals?
Comments
Post a Comment