How to get the parent node of d3.select

Question

again, I have no idea how to get the needed information.

For the following SVG-Objects, I need to get the group tag:

<g id="a39" style="touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" transform="translate(0 0)">
  <line class="hotwater graphic selectedGraphic" x1="400" y1="-70" x2="670" y2="-70" id="g39"></line>
  <line class="hotwater graphic selectedGraphic" x1="400" y1="-50" x2="670" y2="-50" id="g39"></line>
</g>

<g id="a40" style="touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
  <polyline class="warmbrinewater graphic selectedGraphic" fill="none" points="300,-20,240,-160,50,-90,300,-20" id="g40"></polyline>
</g>

My selector is the class selectedGraphic . I need to assign a translation to the encapsulation group-tag. But I have no idea how to get the parent Nodes...

d3.selectAll('.selectedGraphic').**FIRSTELEMENTSPARENT**.attr("transform", "translate(" + xPos + " " + yPos + ")");

Any ideas?

Thanks, Carsten

UPDATE:

Actually I solve it this way:

var sel = document.getElementsByClassName('selectedGraphic');
for (var i = 0; i < sel.length; i++) {
    sel[i].parentNode.setAttribute('transform', "translate(" + xPos + " " + yPos + ")");
}

But I'd appreciate to solve it, using d3.

Answer 1

you can select the parent using node().parentNode like this:

d3.selectAll('.selectedGraphic').node().parentNode;

This will return the parent node, but not sure if you have to do another d3.select() on it.

Answer 2

So, as mentioned, I will answer my question by myself.

Because I had no solution for my problem, I solved it another was. I needed access to the encapsulation g-tag, because I wanted to move all svg-objects by assigning a transform to the group. My selection based on the class "selectedGraphic", that I assigned to the lines (in this case), with click-event.

Now I simply added a class "movable" to the g-tag, when clicking the elements (they catch the event). This class is now selected for movement.

For future needs, I added a simple recursive function, that gets the very first parent of every child, inside an svg-area:

function getFirstParent(svgChild) {
  //svgChild ist ein DOM-Object, kein d3-Object
  if (svgChild.parentNode.tagName == 'svg')
    return svgChild;
  else
    return getFirstParent(svgChild.parentNode);
}

The result is a simple DOM-Object, so I still have no working solution to solve this with d3.

Perhaps this helps someone else :)

Answer 3

If you're still interested in a d3 solution, you can do it like so:

d3.selectAll(".selectedGraphic").each(function () {
  d3.select(this.parentElement).attr("transform", `translate(${xPos},${yPos})`);
});

Same in TypeScript:

d3.selectAll<Element, null>(".selectedGraphic").each(function () {
  d3.select(this.parentElement).attr("transform", `translate(${xPos},${yPos})`);
});