2

私はここで2つのことをしようとしています。

  1. グリッドで選択されたときに上部にバブルを表示します。 (z-index プロパティはありますか?)
  2. 選択時にマウスオーバーと同じアニメーションを取得します。(バブルのサイズをスケーリングします)

参考までにここにコードがあります。どんな助けでも大歓迎です。

http://jsbin.com/alupin/22/

4

1 に答える 1

1

質問への回答:

  • についてz-index: おそらくすでにお気づきでしょうが、チャートは を使用して描画されSVGます。だから答えは実際にここにあります

SVG の Z インデックスは、要素がドキュメントに表示される順序によって定義されます。特定の形状を一番上に表示したい場合は、要素の順序を変更する必要があります。

  • についてresizing: それぞれbubbleが SVG でcircleあるため、バブルのサイズを変更できます (mouseoverおよびmouseoutイベント ハンドラーで行ったように) が、元のデータをcircle要素に (信頼できる方法で) リンクする方法がないため、できません。

EDIT : 要素を並べ替えたい場合 (要素をリストの最後に配置して z-index をシミュレートします)。次のコードを使用できます。

var previous = undefined;
$("circle").live("mouseover", function () {
    previous = $(this).prev();
    $(this).parent().append($(this));
    var radius = 0.00;
    currentRadius = this.r.baseVal.value;
    radius = this.r.baseVal.value * 1.4;
    $(this).animate({svgR: radius }, {
        duration: 200
    });
});


$("circle").live("mouseout", function () {
    if (previous && previous.length > 0) {
        $(this).insertAfter(previous);
    } else {
        $(this).parent().prepend($(this));
    }
    $(this).animate({svgR: currentRadius }, {
        duration: 200
    });
});

ここで実行中

色に基づいて泡を並べたい場合は、次を使用する必要があります。

function onGridSelectionChange(arg) {
    var grid = this;
    var selectedItems = this.select();
    $.map(jobGrowth, function (item) {
        item.color = "#8ebc00";
    });

    $.map(selectedItems, function (item) {
        SetColor(grid.dataItem(item));
    });

    createChart();
    var chart = $("#chart").data("kendoChart");
    chart.refresh();

    var listItems = $("circle");
    var parent = listItems.parent();
    listItems.sort(function(a,b) {
        var a1 = a.getAttribute("fill"), b1 = b.getAttribute("fill");
        if (a1 == b1) return 0;
        return a1 > b1 ? -1 : 1;
    });
    parent.html(listItems)
}

ここでテストしてください

于 2013-01-14T12:50:30.140 に答える