Question

我想在这里做两件事。

在网格中选中时显示顶部的气泡。（是否有z-index属性？）
获取与鼠标悬停时相同的动画。（缩放气泡大小）

我这里有代码供参考。任何帮助将不胜感激。

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

Answer 1

回答你的问题：

关于z-index：您可能已经意识到，使用SVG绘制图表。所以答案实际上是here

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

正在运行here

如果您想根据颜色订购气泡，您应该使用：

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

测试here

气泡图将项目置于选择的顶部

1 个答案: