D3 bring a circle to top?

Question

I'm trying to bring a set of circles to top.

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

But it's not working.

I'm wondering if there's a way to do this by CSS and class.

The question is similar to this but I'm looking for an elegant way.

score 2 · Accepted Answer · answered Aug 21 '13 at 16:31

As @ScottCameron notes, the only way to do this is to actually move the nodes around. In general, for a bunch of sibling elements, this is pretty easy to do:

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

You can see a working example here: http://jsfiddle.net/nrabinowitz/5J37Z/

score 1 · Answer 2 · answered Aug 21 '13 at 16:20

SVG does not have any explicit concept of Z-index. The only way to achieve Z order within an SVG is to move nodes around so the nodes you want on top appear later in the DOM than nodes you want on bottom.

There is talk about adding this for SVG 2 but as far as I know it is still in early development: http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input.

score -1 · Answer 3 · answered Aug 21 '13 at 10:21

-1

add position:absolute; to your circle to make the z-index work

answered Aug 21 '13 at 10:21

SaturnsEye

6,297
10
46
62

I'm pretty sure that neither of these features is available in SVG. – nrabinowitz Aug 21 '13 at 16:23

D3 bring a circle to top?

3 Answers3