Apply z-index to SVG path
As an alternative, you can use "< use >"
Example:
<svg>
<circle id="shape1" cx="20" cy="50" r="40" fill="yellow" />
<rect id="shape2" x="4" y="20" width="200" height="50" fill="grey" />
<circle id="shape3" cx="70" cy="70" r="50" fill="blue" />
<use id="use" xlink:href="#shape2" />
</svg>
The shape2 layer will be the top most layer.
Can we give higher z-index to an SVG tag?
This happens because your SVG has a "static" position by default.
Z-index only affects elements that have a position value other than static.
In your case assigning position: relative
to your SVG will help.
Add the following to your css and it will work as expected (z-index will change on hover, since you applied it to :hover)
.box svg {
position:relative;
}
Updating SVG Element Z-Index With D3
One of the solutions presented by the developer is: "use D3's sort operator to reorder the elements." (see https://github.com/mbostock/d3/issues/252)
In this light, one might sort the elements by comparing their data, or positions if they were dataless elements:
.on("mouseover", function(d) {
svg.selectAll("path").sort(function (a, b) { // select the parent and sort the path's
if (a.id != d.id) return -1; // a is not the hovered element, send "a" to the back
else return 1; // a is the hovered element, bring "a" to the front
});
})
How to manipulate the Z-index of an SVG
Try like this:
var svg = d3
.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 600)
.append("g")
.attr("transform", "translate(50,50)");
//tree data
var data = [
{ child: "John", parent: "" },
{ child: "Aron", parent: "Kevin" },
{ child: "Kevin", parent: "John" },
{ child: "Hannah", parent: "Anna" },
{ child: "Rose", parent: "Sarah" },
{ child: "Anna", parent: "John" },
{ child: "Sarah", parent: "Kevin" },
{ child: "Mark", parent: "Anna" },
{ child: "Angle", parent: "Sarah" },
];
//to construct
var dataStructure = d3
.stratify()
.id(function (d) {
return d.child;
})
.parentId(function (d) {
return d.parent;
})(data);
//to define the size of the structure tree
var treeStructure = d3.tree().size([500, 300]);
var information = treeStructure(dataStructure);
//to make the connections curves
var connections = svg.append("g").selectAll("path").data(information.links());
connections
.enter()
.append("path")
.attr("d", function (d) {
return (
"M" +
d.source.x +
"," +
d.source.y +
" C " +
d.source.x +
"," +
(d.source.y + d.target.y) / 2 +
" " +
d.target.x +
"," +
(d.source.y + d.target.y) / 2 +
" " +
d.target.x +
"," +
d.target.y
);
});
//creating the circles with data info
var circles = svg
.append("g")
.selectAll("circle")
.data(information.descendants());
//placing the circles
circles
.enter()
.append("circle")
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
})
.attr("r", 20);
circle {
fill: rgb(88, 147, 0);
}
path {
fill: none;
stroke: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v6.min.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
With JavaScript, can I change the Z index/layer of an SVG g element?
Z index in SVG is defined by the order the elements appear in the document (subsequent elements are painted on top of previous elements).
You will have to change the element order if you want to bring a specific shape to the top.
Related Topics
What Is the Correct Term for Variable Shadowing in JavaScript
Test If Event Handler Is Bound to an Element in Jquery
How to Execute Promises Sequentially, Passing the Parameters from an Array
How to Call Loading Function with React Useeffect Only Once
New Es6 Syntax for Importing Commonjs/Amd Modules I.E. 'Import Foo = Require('Foo')'
One Liner to Flatten Nested Object
(1, Eval)('This') VS Eval('This') in JavaScript
Getting the Return Value of JavaScript Code in Selenium
Is There a JSON Equivalent of Xquery/Xpath
How to Map More Than One Property from an Array of Objects
Angularjs - How to Use $Routeparams in Generating the Templateurl
Typeerror: Console.Log(...) Is Not a Function
Sorting in JavaScript: Should Every Compare Function Have a "Return 0" Statement