d3 to custom move nodes in DOM-CodePudding

I am working with a svg element, created with d3 as following.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <div id="container"></div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
      <rect  width="1280" height="720" fill="#00b140" stroke="red"></rect>
      <rect  x="70" y="70" width="1020" height="600" fill="none" stroke="#00b140"></rect>
      <g  style="transform: translate(70px, 70px);">
        <g >
          <path  id="valLine" d="M0,600L42.5,600L85,334.0399725781784L127.5,313.86735572781834L212.5,222.9985644559286L255,222.9985644559286L297.5,248.66379557852153L340,248.66379557852153L382.5,248.66379557852153L425,171.66810221073513L467.5,171.66810221073513L510,146.00287108814229L552.5,248.66379557852153L595,248.66379557852153L637.5,248.66379557852153L680,197.33333333333186L722.5,197.33333333333186L765,171.66810221073513L807.5,94.67240884294881L850,94.67240884294881L892.5,94.67240884294881L935,25.495262704563594L977.5,25.495262704563594L1020,0" stroke="black" fill="none" stroke-dasharray="1541.6458740234375 1541.6458740234375"></path>
        </g>
        <g >
          <text x="1020" y="0">31.13</text>
        </g>
        <g >          
          <rect fill="white" rx="2.5" x="1014.7325439453125" y="-15.802469253540039" width="43.73328399658203" height="21.06995964050293"></rect>
        </g>
      </g>
    </svg>
  </body>
  <script type="text/javascript"></script>
</html>

I am trying to figure out how can I select the class body > svg > g > g.fake and move that on top of class body > svg > g > g.movingObjText in DOM so that it results in following

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <div id="container"></div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
      <rect  width="1280" height="720" fill="#00b140" stroke="red"></rect>
      <rect  x="70" y="70" width="1020" height="600" fill="none" stroke="#00b140"></rect>
      <g  style="transform: translate(70px, 70px);">
        <g >
          <path  id="valLine" d="M0,600L42.5,600L85,334.0399725781784L127.5,313.86735572781834L212.5,222.9985644559286L255,222.9985644559286L297.5,248.66379557852153L340,248.66379557852153L382.5,248.66379557852153L425,171.66810221073513L467.5,171.66810221073513L510,146.00287108814229L552.5,248.66379557852153L595,248.66379557852153L637.5,248.66379557852153L680,197.33333333333186L722.5,197.33333333333186L765,171.66810221073513L807.5,94.67240884294881L850,94.67240884294881L892.5,94.67240884294881L935,25.495262704563594L977.5,25.495262704563594L1020,0" stroke="black" fill="none" stroke-dasharray="1541.6458740234375 1541.6458740234375"></path>
        </g>
        <g >
          <rect fill="white" rx="2.5" x="1014.7325439453125" y="-15.802469253540039" width="43.73328399658203" height="21.06995964050293"></rect>
        </g>
        <g >
          <text x="1020" y="0">31.13</text>
        </g>
      </g>
    </svg>
  </body>
  <script type="text/javascript"></script>
</html>

I came across selection.insert() and selection.raise(), but I am not sure how to use any of those/ which one of those to achieve the end result I am looking for.

CodePudding user response：

The raise() seems to work, but you'll need to call it twice to get it at the desired location.

I'd recommend using insertBefore(), this way you can control the location it's dropped;

So move .fake before .movingObjText and the text is shown as expected.

let f = document.querySelector('.fake');
let m = document.querySelector('.movingObjText');

f.parentNode.insertBefore(f, m);

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <div id="container"></div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
      <rect  width="1280" height="720" fill="#00b140" stroke="red"></rect>
      <rect  x="70" y="70" width="1020" height="600" fill="none" stroke="#00b140"></rect>
      <g  style="transform: translate(70px, 70px);">
        <g >
          <path  id="valLine" d="M0,600L42.5,600L85,334.0399725781784L127.5,313.86735572781834L212.5,222.9985644559286L255,222.9985644559286L297.5,248.66379557852153L340,248.66379557852153L382.5,248.66379557852153L425,171.66810221073513L467.5,171.66810221073513L510,146.00287108814229L552.5,248.66379557852153L595,248.66379557852153L637.5,248.66379557852153L680,197.33333333333186L722.5,197.33333333333186L765,171.66810221073513L807.5,94.67240884294881L850,94.67240884294881L892.5,94.67240884294881L935,25.495262704563594L977.5,25.495262704563594L1020,0" stroke="black" fill="none" stroke-dasharray="1541.6458740234375 1541.6458740234375"></path>
        </g>
        <g >
          <text x="1020" y="0">31.13</text>
        </g>
        <g >          
          <rect fill="white" rx="2.5" x="1014.7325439453125" y="-15.802469253540039" width="43.73328399658203" height="21.06995964050293"></rect>
        </g>
      </g>
    </svg>
  </body>
  <script type="text/javascript"></script>
</html>