javascript - How to make the cursor change in d3.js when I want? -
this question related basic javascript loading message while js processing completes
my main problem cursor not changed before 2 functions drawlegend() , display() called, changes after everthing has finnished. code below restore of cursor temporary commented out, hourglass, after has finnished.
how cursor change hourglass before slow functions called?
examplefunc() { mini.append("text") .text(series[i].name) .attr("x",30) .attr("y",(15+(15*i))) .attr("stroke",(d3.rgb(192,192,192))) .attr("fill",(d3.rgb(192,192,192))) .attr("stroke-width",0) .style("font-size","12px") .attr("text-anchor","start") .attr("id","legend") .on('mouseup', legendclick); } //===== legend clicked function legendclick() { //--- mouse pos var origin = d3.mouse(this); //--- channel var ch=math.floor((origin[1]-4)/15); //--- toggle active state if (series[ch].active==true) series[ch].active=false; else series[ch].active=true; settimeout(setcursor("wait"),5); drawlegend(); display(); //settimeout(setcursor("default"),5); // temp removed see result @ } //===== set cursor function setcursor(cursor) { d3.select("body").style("cursor", cursor); }
it known executing things in javascript, hangs application. means eventual output displayed on screen. thus, when change cursor "wait" , after execution "cursor", javascript hasn't changed it, because ui thread busy calculating things in functions "drawlegend" , "display". however, think when execute "drawlegend" , "display" asynchronous like
settimeout(function () { drawlegend(); display(); setcursor("default"); }, 0);
then things should go want to. let me know if works you.
extra info: on this slideshare (especially slide 5) explained problem is.
Comments
Post a Comment