Question

这似乎是一个简单的问题要回答，但我很难这样做：是否有可能＆＃34;包装＆＃34;现有的SVG在使用d3.js的新SVG g标签（即组）中形成，.wrap()在jQuery中的工作方式？如果我只是简单地创建一个新的g标签＆＃34;手动＆＃34;，那么我将如何将现有元素移动到该g？

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通常没有任何问题操纵 SVG元素，它只是无法创建它们！）

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

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

2 个答案: