0

SVGを使用して家系図を作成しています。小さな構造を以下に示します。現在ホバーされている「ノード」の親である「g」の最初の「rect」ごとに、クラス「ノード」の上にマウスオーバーして特定のクラス（たとえば「選択済み」）を追加するためのヘルプが必要です。

$ this.addClass（'classname'）が機能していません。だから私は$this.attr（'class'、'classname'）を使用しています

無力：現在ホバーされている「rect」のすべての親「g」を取得するには、親（jQueryの-）または同様のメソッドのような関数が必要です。

現在の作業-ここをクリック

サンプル構造。

<svg style="width:100%;height:455px" id="svg_root" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g id="viewport" >
        <g id="1">
            <rect class="node" y="0" x="0" width="160" height="35" />
            <text class="prof_name" y="14" x="34">Name</text>
            <g id="2">
                <rect class="node" y="40" x="30" width="160" height="35" />
                <text class="prof_name" y="54" x="64">Name</text>
                <g id="7">
                    <rect class="node" y="80" x="90" width="160" height="35" />
                    <text class="prof_name" y="94" x="94">Name</text>
                </g>
            </g>
        </g>
        <g id="18">
            <rect class="node" y="120" x="0" width="160" height="35" />
            <text class="prof_name" y="134" x="34">Name</text>
        </g>
    </g>
</svg>

jQueryはSVGとは相性が悪いと思います:(

4

3 に答える 3

2

SVGキャンバスと対話できるjQueryプラグインを使用することをお勧めします。まさにこれhttp://keith-wood.name/svg.html（SVG DOMタブ）

SVG DOMは、jQueryが設計されたHTMLDOMとは異なります。特に、アニメーション化できる属性はすべて、プレーンな文字列ではなくオブジェクトとして保存されます。これには、クラス属性が含まれます。したがって、クラスで機能するjQueryの関数は、SVGノードでは機能しません。

この問題を解決するには、jQuerySVGDOM拡張機能を使用できます。

<script type="text/javascript" src="jquery.svgdom.js"></script>
于 2012-11-13T09:09:15.887 に答える
0

raphael.jsを使用してイベントハンドラーを追加できます。例えば

var paper = new Raphael( "id", 200, 200 );
var rect = paper.rect( 0, 0, 160, 35 );

rect.mouseover( function( ) {
    // do stuff
});

詳細とデモはこちら。

あなたの家系図がここでどのように機能するかについてのフィドル

アップデート

Raphael.jsにはsvg要素の親を見つける関数はありませんが、カスタムプロパティをraphael要素に追加することで、家系図を追跡できます。

これを実現する方法を示すために、ここに例を作成しました。うまくいけば、それが役立ちます。

于 2012-11-12T21:39:06.260 に答える
0

これは私のために働きます。

$(window).ready(function(){
    $('#viewport .c_node').mouseenter(function(e) {
        paint_parent(e.target.parentNode);
    });
$('#viewport .c_node').mouseleave(function(e) {
        $('#viewport g').each(function(index, element) {
            $(element).attr('class',"");
        }); 
    });
});
function paint_parent(element){
        if(element.id!="viewport"){ // to the parent id viewport
        $('#'+element.id).attr('class',"cnode_parent");
        paint_parent(element.parentNode);
        }
    }
于 2012-11-13T12:44:09.337 に答える