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:
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");
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;})
...`
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); }); };
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);
//...
})
score:5
Source: stackoverflow.com
Related Query
- how to bring the selected node front in d3 js?
- How can I bring a circle to the front with d3?
- how to highlight the selected node in d3js?
- D3. How do I act on the selected node and all parent nodes
- Bring selected arc hovered over by user to front and dim the display of all other arcs
- How to show and hides nodes when you move the mouse over a node in D3 Javascript
- How to control the group node distance in Hierarchical Edge Bundling in D3.js
- How to import a d3 v4 / v5 module into a Node project but keep the D3 v3 namespace style (d3.)?
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How to get the same node positions in d3's force layout graph
- How to assign the x-axis position of a node in a Sankey Diagram (D3) from the json file
- How to stop Firefox firing mouseleave when DOM node is moved in the DOM?
- How do I set the focal node in a D3.js Force Directed Graph?
- How to "dump" points selected with the LinkedBrush plugin for mpld3?
- How to add a force drag event in D3 and make the node stay where i leave it?
- How do you specify node colors for the d3 radial tree?
- How to add text in the center of node in force directed graph?
- How to highlight path from root to selected node in d3 js?
- How to rotate the D3 chart so that the selected arc is at the bottom?
- How to position a node in the center by radius size?
- How to place node title to the left or right of the node in d3 Sankey graph?
- How can i bring gridlines to the front?
- How can I get the dom svg element from d3 node data?
- How to bring variables into the scope of the .each method in d3
- bring child node close to the parent node in d3
- How to set the last option from a drop-down list as selected using D3.js
- d3 circlepacking how to not zoom out when clicking the same node twice
- How to bring foreignObject elements in SVG to the top layer?
- How to show the unhighlighted/ not selected data points on scatter plots when using brush/group in dc.js? And is multiple brushes possible in dc.js
- D3.js: How to change the position of a text in one single node
More Query from same tag
- D3 map SVG performance
- d3.js partition.nodes(root) does not set the nodes x or dx values
- D3js Force Link label's not showing
- make edges of donut curvy
- get values of single candlestick in mouseover in candlestick chart in d3
- How do I add a label to a d3-generated convex hull?
- What is "defensive reference" in javascript?
- Cannot load .geojson file with D3 in ASP.NET Core
- How to set locale (globally) in Vega
- Rotate rectangle with 4 points using Angular
- Change the layout of a tree in D3JS
- D3. How to update data when recall function (without button)
- Mobile Responsive Javascript Map
- D3.js multiple svg event not triggered
- d3.js traverse hierarchical data
- Added X-Axis Labels to C3 Bar Chart
- d3.csv modifying the input data
- when i call d3.behavior.zoom my graph range.domain() becomes empty
- D3 forceRadial() with nested data centered around parent
- Zoomable D3 Angular Treemap Directive
- GraphStream: Interactive Web Application
- Export manually edited htmlwidget to SVG or similar
- Applying multiple transitions using D3 (v5)
- arrow d3 graph svg not rendering
- d3.js zoom xScale / xAxis
- Rickshaw misinteprets the datetime
- Trouble with getting a bubble chart working in d3
- Path in brush context showing up too small
- Rotate label text on D3
- How do I update and remove groups of bars in a bar chart?