0

I'm trying to change the cursor to an hourglass while doing some processing with d3.js.

I have tried this source:

var chart = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("id","chart")
.attr("class","chart");
                    
chart.style('cursor','wait');

The code below supplied by Anko changes the cursor but raised another problem: The change is not done until my function is done. But that is another question.

d3.select("body").style("cursor", "wait");
John Kugelman
  • 349,597
  • 67
  • 533
  • 578
Lars Ljungberg
  • 313
  • 1
  • 6
  • 19
  • This will only change the cursor when you move it over the SVG. If you want the cursor to change everywhere, try setting this on the body of the document. – Lars Kotthoff Aug 15 '13 at 09:51
  • Yes, I know. But how to do that? I tried with document.body.style.cursor = 'wait'; but it didn't work. – Lars Ljungberg Aug 15 '13 at 09:56
  • 2
    @LarsL Try `d3.select("body").style("cursor", "wait");`. – Anko - inactive in protest Aug 15 '13 at 09:57
  • @Anko Thanks for the code, but it didn't work. – Lars Ljungberg Aug 15 '13 at 10:26
  • @Anko: What browser do you use? I'm using chrome Also, I try to set the hourglass with your code in the beginning of a function and restore the original cursor at the end of the function. – Lars Ljungberg Aug 15 '13 at 11:07
  • @LarsL I'm on Chromium. My steps: Open [D3 home page](http://d3js.org/). Open JS console. Run `d3.select("body").style("cursor", "wait")`. You can restore the original cursor look by calling `.style("cursor", "auto")`. [Here](http://docs.webplatform.org/wiki/css/properties/cursor)'s a reference for the `cursor` CSS property. Still though, some of your elements might have their own default cursors that override the one in your ``. [Here](http://stackoverflow.com/questions/192900/wait-cursor-over-entire-html-page)'s a question about that. – Anko - inactive in protest Aug 15 '13 at 11:52
  • @Anko Your code does work, if I not restore the cursor at the end of my function. E.i. it seems like the processing of the cursorchange is made after leaving my functon. Can the fact that the functio is called from a onmouseup event have something to do with it? – Lars Ljungberg Aug 15 '13 at 12:02
  • @LarsL I don't understand. Could you post a small example? – Anko - inactive in protest Aug 15 '13 at 12:08
  • @Anko I have searched some more and the problem seems to be that js not is threaded but most browsers are. E.I the browser executes my function first, then is the cursor changed. See http://stackoverflow.com/questions/5495042/basic-javascript-loading-message-while-js-processing-completes – Lars Ljungberg Aug 15 '13 at 12:35
  • Yep, JS is pretty bad for resource-intensive computation for that reason. You could look into [web workers](https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers) or make a [request](https://github.com/mbostock/d3/wiki/Requests) and do the work on a server. That's quite far from this question though -- maybe you should ask another or edit this one. – Anko - inactive in protest Aug 15 '13 at 12:51

0 Answers0