d3.jsでグラフを動かす。
var paintGraph = function() { svg.selectAll("g").remove(); svg.selectAll("path").remove(); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - 40) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(0," + (-40) + ")") .call(yAxis) .append("text") .attr("transform", "rotate(-20)") .attr("x", "2em") .attr("y", "-1em") .attr("dy", "-.2em") .style("text-anchor", "end") .text("data [?]"); svg.append("path") .datum(dataset) .attr("class", "line") .attr("d", line); }; paintGraph(); var loopPaint = function() { setInterval(function() { var nwAry = dataset.slice(1); var last = dataset[num - 1]; var nd = {}; nd.date = new Date (last.date.getTime() + duration); nd.close = (Math.random() * 100/10) + 50; nwAry.push(nd); dataset = nwAry; x.domain(d3.extent(dataset, function(d) { return d.date; })); paintGraph(); }, duration); }; loopPaint();
考え方としては単に要素を再描画してるだけ。たいしてちらつきもしないし、こんなもんでもとりあえずそれなりには動くようだ。
それよりかは、各要素、軸とかちゃんとあらかじめどのように配置するかとか考えないと駄目だな。あたりまえだけど。