如何操作SVG的Z索引

编程问答 2022-06-06

问题描述

我正在尝试如何操作SVG的z-index（是SVG的新功能）。这是各自的图片，我试图将圆的z索引调高到比曲线路径更高的位置...我已经进行了一些初步研究，但不幸的是没有找到任何合适的解决方案...通常在帮助下CSS的z-index可以实现，但是由于它是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",{ child: "Sarah",{ child: "Mark",{ child: "Angle",];

//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.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

解决方法

尝试这样：

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}}

创建圆圈after的路径会将其放置在路径上方。

htmljavascriptsvgsvgsvgz-index