Question

我正试图将一组圆圈放在首位。

[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和类来做到这一点。

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

Answer 1

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

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

您可以在此处查看一个有效的示例：http://jsfiddle.net/nrabinowitz/5J37Z/

Answer 2

SVG没有任何明确的Z-index概念。在SVG中实现Z顺序的唯一方法是移动节点，使得顶部所需的节点在DOM中稍后出现，而不是底部所需的节点。

有关于为SVG 2添加此内容的讨论，但据我所知，它仍处于早期开发阶段：http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input。

Answer 3

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

D3带来一个圆圈？

3 个答案: