D3 Tree node double click underlines text

Question

I have a tree structure (similar to http://mbostock.github.com/d3/talk/20111018/tree.html ), except that I changed the node spread / contract from one click to a double click event:

That is, instead of

.on("click", function(d) { toggle(d); update(d); }); 

I use:

 .on("dblclick", function(d) { toggle(d); update(d); }); 

It is functioning normally. The problem is that double-clicking underlines the text label on the node. This does not affect the transition, but it is very annoying. Does anyone know of a way to prevent this from happening, except deleting the node and adding it at the end of the transition?

By the way, I already tried to add

 d3.event.preventDefault() 

inside the double-click event, and it helped nothing.

Answer 1

Google returned the following result: http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/

Code on this page

 $(function(){ $.extend($.fn.disableTextSelect = function() { return this.each(function(){ if($.browser.mozilla){//Firefox $(this).css('MozUserSelect','none'); }else if($.browser.msie){//IE $(this).bind('selectstart',function(){return false;}); }else{//Opera, etc. $(this).mousedown(function(){return false;}); } }); }); $('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect' }); 

In this case, however, you can replace ".noSelect" with ".node", and it should turn off text selection for all of your nodes.

Answer 2

If you do not want to completely turn off text selection (which is usually much better for the user), you can manually deselect an item using selectSubString .

 .on("dblclick", function(d) { toggle(d); update(d); var text = d3.select(this).select("text")[0][0] text.selectSubString(0,0) }); 

But this does not work with a cross browser yet, since the SVG API is not yet fully implemented in many cases. (It works at least in Chrome)

The best way to cross-browser is to simply rewrite the text. Usually this also kills the choice:

 g.on("dblclick", function(d) { toggle(d); update(d); var text = d3.select(this).select("text") var value = text.text() text.text(value) }) 

This worked in Firefox and Chrome at least.