Добавить один родительский узел, выбрав несколько элементов в D3

Question

У меня проблема с добавлением родительского узла путем выбора нескольких элементов.

У меня есть:

<g class="group">
     <g class="Node" id="1">...</g>
     <g class="Node" id="2">...</g>
     <g class="Node" id="3">...</g>
     <g class="Node" id="4">...</g>
</g>

Теперь в приведенной выше структуре мне нужно выбрать некоторые элементы, которые имеют класс Node по их идентификаторам, и добавить для них родительский элемент-родитель.

Это должно выглядеть примерно так, если я выберу Узлы 2 и 3, например:

<g class="group">
    <g class="Node" id="1">...</g>
    <g class="Grp">
        <g class="Node" id="2">...</g>
        <g class="Node" id="3">...</g>
    </g>
    <g class="Node" id="4">...</g>
</g>

Есть ли какой-нибудь способ, которым я могу сделать эту манипуляцию, используя javascript или D3.

Answer 1

Если вам легко, вы можете сделать это с помощью jQuery. Меньше строк кода.

$( "#2, #3" ).wrapAll( "<div class='Grp'></div>" );

console.log($(".group").html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<g class="group">
     <g class="Node" id="1">...</g>
     <g class="Node" id="2">...</g>
     <g class="Node" id="3">...</g>
     <g class="Node" id="4">...</g>
</g>

Answer 2

Просто для полноты, это (один из ...) идиоматический D3 для этого:

var group = d3.select(".group");
var newGroup = group.insert("g", "#g2").attr("class", "Grp");
var nodes = group.selectAll("#g2, #g3").remove();
nodes.each(function() {
  var self = this;
  newGroup.append(function() {
    return self
  });
});

Хорошая особенность метода remove() заключается в том, что, как и несколько методов в D3, он возвращает выбор. Поэтому мы можем удалять элементы, но сохраняя ссылку на них, поэтому мы можем добавить их позже (внутри новой группы).

Вот демо. Ничего не будет отображаться в SVG (выделено синим цветом), вам нужно проверить SVG с помощью веб-инспектора вашего браузера, чтобы увидеть структуру групп:

var group = d3.select(".group");
var newGroup = group.insert("g", "#g2").attr("class", "Grp");
var nodes = group.selectAll("#g2, #g3").remove();
nodes.each(function() {
  var self = this;
  newGroup.append(function() {
    return self
  });
});

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg style="background-color:powderblue;">
  <g class="group">
     <g class="Node" id="g1"></g>
     <g class="Node" id="g2"></g>
     <g class="Node" id="g3"></g>
     <g class="Node" id="g4"></g>
</g>
</svg>

Answer 3

С помощью javascript вы можете сделать что-то вроде этого

var els = document.querySelectorAll('.group, #id2, #id3'); // grab the parent and id2/3
var grp = document.createElement('g');                     // create wrapper
grp.className = 'Grp';                                     // give it a class
els[0].insertBefore(grp, els[1]);                          // insert it before id2
grp.appendChild(els[1]);                                   // move id2 to wrapper
grp.appendChild(els[2]);                                   // move id3 to wrapper

.Grp {
  color: red;
}

<g class="group">
  <g class="Node" id="id1">.1.</g>
  <g class="Node" id="id2">.2.</g>
  <g class="Node" id="id3">.3.</g>
  <g class="Node" id="id4">.4.</g>
</g>