score:1

i'm sure you know by now that svg doesn't have z-index. instead, it layers the elements based on insertion order. to solve your issue, add the node again so that it's inserted after (and displayed over) everything else.

here's the jsfiddle with the solution, running with a sample image.

to summarize:

  1. add an id to the svg so that selections are simple and unambiguous:

    vis = d3.select("#visfel_map").append("svg")
    .attr("width", w).attr("height", h).attr("id", "mainsvg");
    
  2. add an id for each node during setup:

    var idstart = "letter_";
    // append images
    var images = nodeenter.append("svg:image")
                .attr("xlink:href",   "https://www.freeclipartnow.com/d/39895-1/decorative-letter-a.jpg")
                .attr("id", function(d){return idstart + d.name;})
    

    ...`

  3. next, add the function to move the desired element to the end of the insertion list. i based it on this block but i'm specifying the id of the svg element to avoid confusion.

    d3.selection.prototype.movetosvgfront = function() {  
      return this.each(function(){
       d3.select("#mainsvg").node().appendchild(this);
      });
    };
    
  4. finally, update the mouseenter function, using movetosvgfront. also invoke your existing nodetransform function to ensure that the element is positioned correctly:

    .on( 'mouseenter', function() {
      var currnode =  d3.select(this);
      if(currnode.attr("id").length === idstart.length + 1){ // only run for letters, not for titles (which cause an error in nodetransform)
        currnode.movetosvgfront();
        currnode.attr("transform", nodetransform);
        ...
      }
    })
    

**edit: @keerthivasan here's a jsfiddle with code to also moves and styles the text. note that

a. css has been added for the new class (focuslabel)

b. the labels have been given an id related to the node's id; this is used to access the label in the mouseenter function, which sets the translation based on the node's position and size

c. the original coordinates are reapplied in the mouseleave function.

score:1

as already mentioned, drawing order of svg elements is determined by their order in dom.

the this.parentnode.appendchild(this) trick works as long as it's performed on the right element. in your case, it's not the <image> but its parent <g> that has to move.

images.on('mouseenter', function() {
    var parent = this.parentnode; // <g>
    parent.parentnode.appendchild(parent);
    var currnode =  d3.select(this);
    //...
})

example (with placeholder images)

score:5

d3.v4 - d3.v5 - d3.v6

.on('mouseenter', function() {

    d3.select(this).raise()

})

example


Related Query