Question

基本上我只想附加到我的document.body外部SVG多次使用D3。经过一些研究，我发现使用d3.xml我可以操作外部svg文件。事实上：

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

这非常简单。现在，出于测试目的，我想在n个不同的容器中附加这个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 );
        }

结果，我只有一个SVG文件附加到最后一个div，类container9。我做错了什么？

由于

编辑：plunkr https://plnkr.co/edit/QHRYJdVUcd2Z8SSNN8jN?p=preview

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

0 个答案: