How to manipulate the Z-index of an SVG

Question

I am trying how to manipulate the z-index of an SVG(am new to SVG). Here is the picture of the respective, I am trying to bring up the circle's z-index higher than the curve path...I have done some initial research but unfortunately didn't found any suitable solutions...usually, with the help of CSS's z-index it can be possible but as it's an SVG I can't figure it out how to make it work.[![

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

Please take a look at this pen: https://codepen.io/osublake/pen/YXoEQe He is using `appendChild` to append the element at the end of the svg element — enxaneta, Oct 28 '20 at 08:39
Hello, @enxaneta thanks for the reply. Is it possible to connect one child node from the two-parent node? — thelonelyCoder, Oct 29 '20 at 08:36

sbgib · Accepted Answer · 2020-10-28T07:56:58.470

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>

Creating the circles after the path will place them above the path.

also any Idea, how can I insert a text into the circle itself? @sbgib — thelonelyCoder, Oct 28 '20 at 07:58
You would add the text after the circle, in one of [these ways](https://stackoverflow.com/questions/6725288/svg-text-inside-rect). — sbgib, Oct 28 '20 at 08:01
actually, I need to add the text programmatically, and the texts much not be the same... @sbgib — thelonelyCoder, Oct 28 '20 at 08:07
is it possible to connect one child node from the two-parent node? @sbgib — thelonelyCoder, Oct 29 '20 at 08:35
I can't see anything about doing that in the [tree structure docs](https://d3-wiki.readthedocs.io/zh_CN/master/Tree-Layout/). In [this](https://stackoverflow.com/questions/43527019/d3-tree-layout-visualization-inherit-child-with-multiple-parents) answer, a network graph is recommended instead. Another way might be to simply list the child twice (once under each parent) if that case is an exception. — sbgib, Oct 29 '20 at 10:18
I have posted another question in, just you let you understand my question a bit more clear - https://stackoverflow.com/questions/64587495/how-can-i-connect-two-parent-node-into-one-child-node-in-d3-js-svg — thelonelyCoder, Oct 29 '20 at 12:36

How to manipulate the Z-index of an SVG

1 Answers1