javascript - Raphael Js はクリック時にコンテンツを切り替えます

Question

私の英語はゴミですが、試してみたいです。

これは私が修正したバージョンです。これらのベクトルはカラフルなボタンです。各ボタンをクリックしたときにテキストを表示しようとしていますが、他のボタンをクリックすると、次の図に示すようにテキストが重なります。

http://i.stack.imgur.com/S39dX.png

イベントを処理するコードは次のとおりです。

$('.get').find('.arc').each(function(i){
        var t = $(this), 
            color = t.find('.color').val(),
            value = t.find('.percent').val(),
            text = t.find('.text').text();

            conteudo = t.find('.conteudo').text();
            alet = ( 11.25 * i );

            /*title.rotate(20.25 * i);*/

        rad = arco_espaco;  
        var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': arco_width,});
        var zm = r.path().attr({ arc: [value, color, rad], 'stroke-width': arco_width, opacity: 0}).toFront();/*MASK*/

        var title = r.text(220, 0, defaultText).attr({
            font: '20px Arial',
            fill: '#fff'
            }).toFront();
            title.rotate(11.25*(i+0.40),-1,5);

        var texto = r.text(300, 10,  conteudo).attr({
            font: '20px Arial',
            fill: '#fff',
            "text-anchor":"start",
            opacity: 0
            }).toFront();



        var group = r.set();
        group.push(z);
        group.push(title);
        ativo = 1;



        zm.mouseover(function(){
            group.animate({ 'stroke-width': arco_ganho, opacity: .75 }, 1000, 'elastic');
            if(Raphael.type != 'VML') //solves IE problem
            title.stop().animate({ opacity: 1 }, speed, '>', function(){
                title.attr({ text: text + '\n'}).animate({ opacity: 1 }, 50, '<');
                title.toFront();
                zm.toFront();

            });

            document.body.style.cursor = "pointer";


        zm.mouseout(function(){
        zm.toFront();
            group.stop().animate({ 'stroke-width': arco_width, opacity: 1 }, speed*4, 'elastic');
            title.stop().animate({ opacity: 0 }, speed, '>', function(){
                title.attr({ text: defaultText }).animate({ opacity: 0 }, speed, '<');
                title.attr({ text: text + '\n'  }).animate({ opacity: 0, align: left }, speed, '<');

            }); 
            document.body.style.cursor = "auto";

        });

        zm.click(function () {
        $("#diagram").css("background-color",color);
        texto.attr({opacity: 1});
        tempp = texto;

        });


        })

        zm.toFront();
    });

テキストは html ファイルから取得されます。

<div class="get">
        <div class="arc">
            <span class="text">Secretaria</span>
            <input type="hidden" class="percent" value="100" />
            <input type="hidden" class="color" value="#f6c201" />
            <span class="conteudo">TEEEEEXXXXXXTT >>>SECRETARIA<<<</span>
        </div>

        <div class="arc">
            <span class="text">Financeiro</span>
            <input type="hidden" class="percent" value="100" />
            <input type="hidden" class="color" value="#97BE0D" />
            <span class="conteudo">TEEE-------XTT >>>FINANCEIRO<<<</span>

        </div>
</div>

jsbin http://jsbin.com/unojov/2/editを参照してください。