Javascript 使用D3.js多次附加外部svg

基本上，我只想使用D3将一个外部SVG多次附加到document.body中。经过一些研究，我发现使用

d3.xml

可以操作外部svg文件。事实上：

d3.xml("myFile.svg").mimeType("image/svg+xml").get(function(error, xml) {
            var svgElement = xml.documentElement;
            document.body.appendChild(svgElement);
}

这很简单。现在，出于测试目的，我想在不同的容器中添加此svg

n

次，为了实现这一点，我在d3请求中使用for循环：

d3.xml("myFile.svg").mimeType("image/svg+xml").get(function(error, xml) {
        if (error) throw error;

        // var svgElement = xml.documentElement;
        // document.body.appendChild(svgElement);

        var n = 10;

        for(var i = 0; i < n; i++) {
        var svgElement = xml.documentElement;

          var container = d3.select(document.body).append("div").attr("class", function() {
            return "container" + i;
          });
          debugger;
          document.querySelector(".container" + i).appendChild(svgElement );
        }

d3.xml（“myFile.svg”）.mimeType（“image/svg+xml”）.get（函数（错误，xml）{
如果（错误）抛出错误；
//var svgElement=xml.documentElement；
//文件.正文.附件（SVGELENT）；
var n=10；
对于（变量i=0；i

因此，我只有一个SVG文件附加到最后一个div中，class

container9

。我做错了什么

谢谢

---

编辑：plunkr

嘿，Gerardo，谢谢你的回答。我故意不使用惯用的data（）.enter（）方法，因为这不是我需要的。但也许我错了，我只是不知道如何通过这种方式实现“desiderata”。还有，用ES6的let代替“var”有什么意义？是否不禁止重新声明let变量？

未捕获类型错误：未能在“节点”上执行“appendChild”：参数1不是“Node”类型。

我甚至不确定是什么触发了此错误。等一下，Plunk中有两个循环，而您的问题只有一个循环。哪一个是正确的？还有更多问题需要解决n只是作用域和循环。您必须将节点导入/克隆到DOM：。此外，您必须确保导入的SVG不会对其元素使用任何ID，因为这些ID在整个DOM中必须是唯一的……这可能是一个好的开始。嘿，Gerardo，谢谢你的回答。我故意不使用惯用数据（）。enter（）方法，因为这不是我需要的。但也许我错了，我只是不知道如何通过这种方式实现“desiderata”。还有，用ES6的let代替“var”有什么意义？是否不禁止重新声明let变量？

未捕获类型错误：未能在“节点”上执行“appendChild”：参数1不是“Node”类型。

我甚至不确定是什么触发了此错误。等一下，Plunk中有两个循环，而您的问题只有一个循环。哪一个是正确的？还有更多问题需要解决n只是作用域和循环。您必须将节点导入/克隆到DOM:。此外，您必须确保导入的SVG不会对其元素使用任何ID，因为这些ID在整个DOM中必须是唯一的……这可能是一个好的开始。