D3.js как вставить выделение в новый элемент

Question

Мне интересно, есть ли в D3.js встроенная функция для создания нового элемента (вложения) выделения. Например у меня есть структура вроде этого:

<path ...></path> 
<path ...></path> 
<path ...></path> 
<path ...></path> 
<path ...></path> 

И я хочу, чтобы получить, что:

<path ...></path> 
<path ...></path> 
<g> 
    <path ...></path> 
</g> 
<path ...></path> 
<path ...></path> 

Так что я просто создать новый элемент вокруг моего выбора.

Думаю, мы можем сделать что-то вроде: получить выделение, отделить его, создать элемент и вставить выделение в новый элемент. Прошу прощения, если этот вопрос уже опубликован, я изо всех сил пытаюсь объяснить это на английском языке.

Любое предложение оценить

Answer 1

Хотя в D3 нет такой вещи, как JQuery-х .wrap(), это довольно легко сделать манипуляции DOM. Вы должны использовать три методов D3 в:

1. selection.insert(name[, before]) вставить элемент оберточной в нужное положение в дереве DOM. Это вернет вновь вставленный элемент.

2. selection.remove() удалить элемент, который будет обернут из DOM. Эта функция вернет удаленный элемент как выбор D3.

3. selection.append(), чтобы добавить удаленный элемент (2.) к оберточному элементу (1.). В этом случае вам необходимо передать узел DOM в .append(), тогда как selection.remove() возвращает выбор D3. Поэтому вам нужно получить узел по вызову selection.node().

прикован вместе вы будете в конечном итоге с чем-то вроде следующего:

d3.select("svg") 
 
    .insert("g", "#c")   // Insert the wrapper before <path id="c"> 
 
    .append(function() {  // Append to the wrapper the element... 
 
    \t return d3.select("#b") 
 
      \t .remove() // ...which was previously removed. 
 
      \t .node();  // Use the node instead of D3's selection 
 
\t });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<svg width="100" height="100"> 
 
    <path id="a" d="M1 1"></path> 
 
    <path id="b" d="M1 1"></path> 
 
    <path id="c" d="M1 1"></path> 
 
</svg>

Это произведет следующий результат:

<svg width="100" height="100"> 
    <path id="a" d="M1 1"></path> 
    <g> 
     <path id="b" d="M1 1"></path> 
    </g> 
    <path id="c" d="M1 1"></path> 
</svg>