javascript - 如何使用 d3.js 将外部组添加到现有 svg？

Question

假设我用 d3.js 创建了一个 svg:

svg = d3.select('.svgContainer').append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .call(d3.zoom().on("zoom", function () {
      svg.attr("transform", d3.event.transform)
   }))
   .append("g");

我现在想向其中添加不同的组(动态地和来自不同的文件)。比如那个:

<svg>
    <g id="myGroup">
        <rect width="100" height="100" fill="blue" />
    </g>
</svg>

我知道，我可以像那样添加整个 svg(假设文件名为 test.svg):

d3.xml("test.svg").then(function(xml) { 
    var svgNode = xml.getElementsByTagName("svg")[0];
    svg.node().appendChild(svgNode);
  });

但是，这会产生以下 DOM:

svg
 -svg
 --myGroup

但是因为我需要根据主 svg 转换我的组，所以我需要以下 DOM 结构:

 svg
 -myGroup
 --(eventually more dynamically added groups)

我已经尝试了以下并获得了正确的 DOM，但是该组没有出现在我的 svg 中:

d3.xml("test.svg").then(function(xml) { 
    var svgGroup = xml.getElementById("myGroup");
    svg.node().append(svgGroup);
  });

编辑:我发现，这应该已经可以工作了，问题是我有几个关键的 <defs>在我的 SVG 中(例如渐变)。当我只附加该组时，我丢失了它们。我结束了，包装我的 <g> <defs>周围现在一切正常。

Answer 1

作为对 accepted answer 的补充:如果你想要一个纯 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>