在G標籤中包裝現有的SVG元素

這似乎是一個簡單的問題來回答，但我很難這樣做：是否有可能在新的SVG g標籤中「包裝」現有的SVG形狀即組）使用d3.js，.wrap()的方式在jQuery中工作？如果我只是簡單地手動創建一個新的g標籤，那麼我將如何將現有元素移動到g中？在G標籤中包裝現有的SVG元素

來源

2014-03-28 drewmoore

D3不提供任何功能性的問題，它更容易使用'包（）'如果這就是你想要的。 –

@LarsKotthoff和jQuery沒有關係在SVG中包裝元素？ – drewmoore

我從來沒有用過它，但我不明白爲什麼它不應該 - 它只是一個DOM。 –

如果您將現有的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元素，它只是不能創建它們！）

來源

2014-03-28 17:42:42 AmeliaBR

美麗的答案。謝謝。 – drewmoore

無法使@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

來源

2017-04-15 10:50:21

在G標籤中包裝現有的SVG元素

回答

相關問題