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元素链接（以可靠的方式），所以您不能。

编辑：如果您想重新排序元素（通过将元素放在列表末尾来模拟 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 回答