0

我正在尝试将一组圆圈置于顶部。

[JS]
function brushUser(userList){
    userMapSvg.selectAll('circle')
        .data(userNodes)
        .classed('selected', function(d){
            if ( contains(userList, d.firmwideId)){
                return true;
            }
            else
                return false;
            });
}

[CSS]
#selector-usermap-body circle {
    fill: steelblue;
    z-index: 1;
}

#selector-usermap-body circle.selected{
    stroke: black;
    stroke-width: 2;
    z-index: 10;
}

但它不起作用。

我想知道是否有办法通过 CSS 和类来做到这一点。

问题与此类似，但我正在寻找一种优雅的方式。

4

3 回答 3

2

正如@ScottCameron 指出的那样，唯一的方法是实际移动节点。一般来说，对于一堆兄弟元素，这很容易做到：

circle.on('mouseover', function() {
    this.parentNode.appendChild(this);
});

您可以在这里看到一个工作示例：http: //jsfiddle.net/nrabinowitz/5J37Z/

于 2013-08-21T16:31:08.257 回答
1

SVG 没有任何明确的 Z-index 概念。在 SVG 中实现 Z 顺序的唯一方法是移动节点，以便您想要在顶部的节点出现在 DOM 中，而不是您想要在底部的节点。

有人谈论为 SVG 2 添加这个，但据我所知，它仍处于早期开发阶段：http ://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input 。

于 2013-08-21T16:20:57.077 回答
-1

添加position:absolute;到您的圈子以使 z-index 工作

于 2013-08-21T10:21:50.517 回答