我正在尝试如何操作SVG的z索引(我是SVG的新手(。这是各自的图片，我正试图使圆的z指数高于曲线路径。。。我做了一些初步研究，但不幸的是没有找到任何合适的解决方案。。。通常，在CSS的z索引的帮助下，这是可能的，但由于它是SVG，我不知道如何使其工作。[！[
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);
//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);
//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
);
});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>]1] 1
这样尝试：
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>在路径之后创建圆将使它们位于路径上方。