D3树节点双击亮点文本

Question

我有一个树视图（类似于http://mbostock.github.com/d3/talk/20111018/tree.html）单击双击事件：

也就是说，而不是

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

我正在使用：

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

它功能正常。问题是双击点突出显示节点上的文本标签。它不会影响过渡，但非常烦人。有谁知道一种方法可以防止这种情况发生，除了删除节点并在过渡结束时添加回去？

顺便说一句，我已经尝试添加

d3.event.preventDefault()

在双击事件中，它无济于事。

Answer 1

Google返回以下结果：http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/

该页面上的代码为

$(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'
});

在这种情况下，您可以用" .node"替换'.noselect'，并且应该禁用所有节点的文本突出显示。

Answer 2

如果您不想完全禁用文本选择（通常对用户更好），则可以通过SelectSubstring手动取消元素。

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

但由于在许多情况下尚未完全插入SVG API，因此这尚不可用。（至少在Chrome中起作用）

更好的交叉浏览器方式就是重写文本。这通常也会杀死选择：

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

至少在Firefox和Chrome中起作用。