javascript - Reset or Clear Cubism Graph -
i'm trying reset or clear d3.js cubism graph starts fresh. here code :
$(function(){ // create new cubism.js context render var graphcontext = cubism.context() .serverdelay(1000) // allow 1second delay .step(1000) // 1 second steps .size(650); // 50px wide // create new metric // allows retrieve values source // data-source agnostic, not matter. var graphmetric = graphcontext.metric(function(start, stop, step, callback) { var values = []; start = +start; stop = +stop; while (start < stop) { start += step; values.push(math.random()); } callback(null, values); }); // here create new element , append our // parent container. call d3 select newly created // div , can create chart var graphelement = document.createelement("div"); $("#insertelement").append(graphelement); d3.select(graphelement).call(function(div) { div.append("div") .attr("class", "axis top") .call(graphcontext.axis().orient("top")); div.append("div") .attr("class", "rule") .call(graphcontext.rule()); div.selectall(".horizon") .data([graphmetric]) .enter().append("div") .attr("class", "horizon") .call(graphcontext.horizon() .height(150) ); }); });
here demo on jsfiddle
i can suggest clearing canvas yourself. this
$(graphelement).find('canvas')[0].getcontext('2d').clearrect(0, 0, canvaswidth, canvasheight);
full code (jsfiddle)
console.clear(); $(function(){ var canvaswidth = 650, canvasheight = 150; // create new cubism.js context render var graphcontext = cubism.context() .serverdelay(1000) // allow 1second delay .step(1000) // 1 second steps .size(canvaswidth); // 50px wide // create new metric // allows retrieve values source // data-source agnostic, not matter. var graphmetric = graphcontext.metric(function(start, stop, step, callback) { var values = []; start = +start; stop = +stop; while (start < stop) { start += step; values.push(math.random()); } callback(null, values); }); // here create new element , append our // parent container. call d3 select newly created // div , can create chart var graphelement = document.createelement("div"); $("#insertelement").append(graphelement); d3.select(graphelement).call(function(div) { div.append("div") .attr("class", "axis top") .call(graphcontext.axis().orient("top")); div.append("div") .attr("class", "rule") .call(graphcontext.rule()); div.selectall(".horizon") .data([graphmetric]) .enter().append("div") .attr("class", "horizon") .call(graphcontext.horizon() .height(canvasheight) ); }); $('#reset').on('click', function () { $(graphelement).find('canvas')[0].getcontext('2d').clearrect(0, 0, canvaswidth, canvasheight); }); });
Comments
Post a Comment