0

All:

I am pretty new to CSS. One Data visualization user case I try to implement(I use D3.js) is :

Say there are several DIVs overlap each other, the one clicked will show on the top layer,I wonder how can I set its z-index when all DIVs z-index are "auto"?(for certain reason like data binding, I can not adjust its location in the DOM tree)?

The main difficulties that I have is: How to determine the starting minimum z-index for those DIVs( because there are some other elements, even I can give a higher z-index to the one clicked and lower for all other DIVs, but the number still can possibly be smaller than other elements) So, if I can get that z-index, I do not need to know what it is, but as long as I can increase it to make sure the clicked one has higher number than that, then it is done.

Or is there other ways to do this?

var container = d3.select("body")
                    .append("div")
                    .classed("random", true)
                    .style("position", "fixed")
                    .style({
                        "top":"50px",
                        "width":"200px", 
                        "height":"200px", 
                        "background-color":"rgba(100,100,100, 0.5)"
                    })

var color = d3.scale.category20(); 
container.selectAll("span")
            .data([1,2,3,4])
            .enter()
            .append("span")
            .style({
                "position":"absolute",
                "width":"50px", 
                "height":"50px"
            })
            .style("margin", function(d,i){
                return i*10+10+"px";
            })
            .style("background-color", function(d, i){
                return color(i);
            })
            .text(function(d, i){
                return d;
            })
container.selectAll("span")
        .on("click", function(d, i){ 
            var block = d3.select(this); 


            // this is the part I can not figure out ================
            block.moveToFront();    


        });
Kuan
  • 11,149
  • 23
  • 93
  • 201
  • Possible duplicate of [How can I bring a circle to the front with d3?](http://stackoverflow.com/questions/14167863/how-can-i-bring-a-circle-to-the-front-with-d3) – sglazkov Feb 26 '16 at 19:43
  • @sglazkov Thanks, that post is one of the reason I ask my question, I need to avoid changing order of element in the DOM tree. – Kuan Feb 26 '16 at 19:46
  • sorry about it, i make a demo for you – sglazkov Feb 26 '16 at 20:12

1 Answers1

0

you don't use a SVG and can apply z-index style to clicked element

example here: https://jsfiddle.net/serGlazkov/z3gykfc1/

UPD:

change your example to SVG format and make top position by click https://jsfiddle.net/serGlazkov/z3gykfc1/3/

sglazkov
  • 1,046
  • 1
  • 10
  • 38
  • Thanks, but how do u determine that topZindex is larger than other elements, say there is a SPAN or something already has larger z-index (say 100 or something) – Kuan Feb 26 '16 at 20:18
  • Thanks, from MDN, it says: " The use element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, and then pasted where the use element is, much like cloned template elements in HTML5." So basically it add another element to DOM(which is like change the original one position in DOM), while I **can not** adjust the DIVs(or the RECT in your updated version) – Kuan Feb 26 '16 at 21:21