5

展開/縮小ノードをシングルクリックからダブルクリックイベントに変更したことを除いて、ツリービュー（ 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()

ダブルクリックイベントの内部で、それは何の助けにもなりませんでした。

4

2 に答える 2

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

ただし、この場合、「。noSelect」を「.node」に置き換えることができ、すべてのノードのテキストの強調表示を無効にする必要があります。

于 2012-10-24T21:43:38.020 に答える
0

テキストの選択を完全に無効にしたくない場合（通常はユーザーにとってはるかに便利です）、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で機能しました。

于 2012-10-24T22:29:53.447 に答える