2 回答

TA貢獻1805條經驗 獲得超10個贊
作為對已接受答案的補充:如果您想要純 D3 解決方案,則可以使用selection.append函數。在你的情況下:
d3.xml(svgfile).then(function(xml) {
var svgNode = d3.select(xml).select("#MyGroup");
svg.append(() => svgNode.node()) ;
});
或者更短:
d3.xml(svgfile).then(function(xml) {
svg.append(() => d3.select(xml).select("#MyGroup").node()) ;
});
這是使用其他答案中鏈接的維基百科 SVG 的演示:
var svgfile = "https://simple.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg";
var svg = d3.select('body').append("svg")
.attr("width", '120')
.attr("height", '20');
d3.xml(svgfile).then(function(xml) {
var svgNode = d3.select(xml).select("#Wikipedia");
svg.append(() => svgNode.node());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

TA貢獻1860條經驗 獲得超9個贊
你快到了。我已經說明了在這個 codepen 中添加元素的兩種方法。第一種方法的問題在于svgNode它不是 a node,而是 a nodeList。您可以使用循環添加列表中的每個節點,如代碼所示:
...
var toAdd = svgNode.childNodes;
for (var i = 0; i < svgNode.childElementCount; i++){
svg.node().appendChild(toAdd[i]);
}
...
關于第二種方法,我不能說有什么問題。我從不同的 svg 文件導入了一個路徑,它顯示在下部。我更改的唯一細節是我明確設置了 svg 元素的大小,而不是100%. 是否有可能因為它在可見部分之外而沒有被渲染?
添加回答
舉報