I have a tree view (similar to .html) except I changed the expand/contract node from a single click to the double click event:

That is, instead of

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

I am using:

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

It functions fine. The issue is that the double click highlights the text label on the node. It does not effect the transition, but it is very annoying. Does anyone know of a way prevent this from happening, other than deleting the node and adding it back at the end of the transition?

BTW, I already tried adding

d3.event.preventDefault()

inside the double click event, and it did nothing to help.

I have a tree view (similar to http://mbostock.github./d3/talk/20111018/tree.html) except I changed the expand/contract node from a single click to the double click event:

That is, instead of

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

I am using:

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

It functions fine. The issue is that the double click highlights the text label on the node. It does not effect the transition, but it is very annoying. Does anyone know of a way prevent this from happening, other than deleting the node and adding it back at the end of the transition?

BTW, I already tried adding

d3.event.preventDefault()

inside the double click event, and it did nothing to help.

• javascript
• svg
• d3.js
• tree

• Alternatively, cover the text with a div: stackoverflow./questions/13058123/… – Cees Timmerman Commented Apr 11, 2014 at 13:08

2 Answers 2

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

The code on that page is

$(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 disable text highlighting for all of your nodes.

If you do not want to disable selection of text pletely (which is usually much nicer for the user), you can manually deselect an element via 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 yet work cross browser since the SVG API is not yet fully implemeted in many cases. (It works in Chrome at least)

A better cross browser way is to just rewrite the text. This usually also kills the selection:

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.