将现有的SVG元素包裹在G标签中

Question

这似乎是一个简单的问题，但我很难回答：是否可以使用d3.js将现有的SVG形状“包裹”在新的SVG g标签（即组）中，就像jQuery中的.wrap()一样？如果我只是手动创建一个新的g标签，那么我该如何将现有元素移动到该g中呢？

- drew moore

---

D3没有为此提供任何功能，如果wrap()可以实现你需要的功能，那么使用它会更容易。 - Lars Kotthoff

@LarsKotthoff，jQuery在将元素包装在SVG中方面表现如何？ - drew moore

我自己从未使用过它，但我不认为它不应该使用——它只是一个 DOM。 - Lars Kotthoff

Answer 1

如果你将一个现有的DOM元素传递给append或insert，那么这个元素（以及它的子元素）就会从它们在DOM层次结构中的当前位置移动到你刚刚插入它们的位置。

var stuffToBeWrapped = d3.selectAll(".stuff");

stuffToBeWrapped.each(function() {

   d3.select( this.parentNode ).insert("g", function(){return this;} ) 
              //insert a new <g> element immediately before this element
     .attr("class", "wrapper") //set anything you want to on the <g>
     .append( function(){return this;} );
             //move the content element into the group

});

由于d3期望您始终使用函数来确定要插入或插入在哪个元素之前，因此这有点混乱，但是当我们在each语句中完成所有操作时，这并非必需。 但是这样应该能够完成工作！

或者，如果您已经在页面上使用了JQuery库，可以使用JQuery方法。 JQuery通常没有任何问题来操作SVG元素，它只是无法创建它们！

- AmeliaBR

Answer 2

无法使 @AmeliaBR 的回答起作用，我解决了这个问题，像这样

d3.selectAll(selectElementsToWrap).each(function() {
    var el = this;
    d3.select(el.parentNode)
      .insert("g")
      .attr("class", "wrapped")
      .append(function() { return el; });
});

该方案已被批准，但出现了DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent的错误。

- Roy Shilkrot

---

我曾经遇到过同样的问题，这个解决方案对我有效。可能是在append内部使用时this绑定不同。只有一个小提示：你可以用更紧凑的箭头函数来替换append函数内部的函数声明。类似.append( () => el );。 - Bemipefe