Javascript 使用d3.js在一个xml中导入多个SVG

目前我正在摆弄D3.js。看起来棒极了！我想知道D3.js是否适合在网页中绘制多个svg元素。我找到了d3.xml方法并使其正常工作

起初我是在玩Raphaeljs，但作为一名JS新手，很难找到有用的Tut/Doc。我用webtool将SVG转换为JSON对象，然后将它们放入一个js文件中——剥离标记和其他东西需要很多工作。这样可以保存HTTP请求。现在我想在D3.js上尝试同样的方法，看看哪一种适合我

---

使用D3导入多个SVG文件有什么想法？

使用D3可以写入的SVG数量没有限制。D3所做的就是访问DOM并对其进行修改，以便浏览器知道如何绘制SVG，或者如何操作SVG。D3只允许您更轻松地访问元素并使用它们

如果您正在从JSON对象读取SVG，那么只需要读入多个JSON

以D3js.org网站上的前两个例子为例

d3.csv("morley.csv", function(error, csv) {
  var data = [];

  csv.forEach(function(x) {
    var e = Math.floor(x.Expt - 1),
        r = Math.floor(x.Run - 1),
        s = Math.floor(x.Speed),
        d = data[e];
    if (!d) d = data[e] = [s];
    else d.push(s);
    if (s > max) max = s;
    if (s < min) min = s;
  });

  chart.domain([min, max]);

  var svg = d3.select("body").selectAll("svg")
      .data(data)
    .enter().append("svg")
      .attr("class", "box")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.bottom + margin.top)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(chart);

  d3.select("button").on("click", function() {
    svg.datum(randomize).call(chart.duration(1000)); // TODO automatic transitions
  });
});

从气泡图示例中，这将打开“flare.json”并开始处理它。没有任何东西可以阻止您在同一个文件中执行这两个操作

与其他任何程序一样，您必须注意的是变量引用。每个SVG都需要自己的参考。上面的两个代码块在几个方面使用相同的变量名，因此它们会相互影响。如果您想在一个页面上同时显示这两个变量，只需重命名变量，使其唯一。

d3.xml（“./svgs.xml”，“application/xml”，function（xml，error）{
d3.xml("./svgs.xml", "application/xml", function(xml, error) {

    var data = xml.documentElement,
        sections = data.getElementsByTagName("section"),
        svgWrapper = "center";


    for (var i = 0, lenS = sections.length; i < lenS; i++) {    

        var name = sections[i].getElementsByTagName("name")[0].childNodes[0].nodeValue,
            images = sections[i].getElementsByTagName("image");

        for (var j = 0, lenI = images.length; j < lenI ; j++) {   

            //<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            var image = images[j].firstElementChild;

            //assuming I only target 1 unique HTML5-element
            if (document.getElementsByTagName(name)[0] !== undefined) {

                //in search of wrapper-class and append data to it
                document.getElementsByTagName(name)[0].getElementsByClassName(svgWrapper)[0].appendChild(image);

            // If node "name" is not a element then it's an id
            } else if (document.getElementById(name) !== undefined) {

                document.getElementById(name).getElementsByClassName(svgWrapper)[0].appendChild(image);
            } else {

                console.alert("what the hell went wrong while inserting svgs?!");
                alert("What the hell went wrong while inserting svgs?!");
            }

        }   
    }
});

var data=xml.documentElement，
sections=data.getElementsByTagName（“section”），
svgWrapper=“中心”；
对于（var i=0，lenS=sections.length；i

---

如果有人得到了一些建议，比如IE9，可能需要改进，因为只需要在Chrome和Firefox上测试一下（必须安装Windows VM）。如何捕获和处理XHR中的错误参数

谢谢你的深思熟虑的回答。我会深入研究的！！！这对我来说有点复杂，但我必须从某个地方开始，不是吗？！

d3.xml("./svgs.xml", "application/xml", function(xml, error) {

    var data = xml.documentElement,
        sections = data.getElementsByTagName("section"),
        svgWrapper = "center";


    for (var i = 0, lenS = sections.length; i < lenS; i++) {    

        var name = sections[i].getElementsByTagName("name")[0].childNodes[0].nodeValue,
            images = sections[i].getElementsByTagName("image");

        for (var j = 0, lenI = images.length; j < lenI ; j++) {   

            //<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            var image = images[j].firstElementChild;

            //assuming I only target 1 unique HTML5-element
            if (document.getElementsByTagName(name)[0] !== undefined) {

                //in search of wrapper-class and append data to it
                document.getElementsByTagName(name)[0].getElementsByClassName(svgWrapper)[0].appendChild(image);

            // If node "name" is not a element then it's an id
            } else if (document.getElementById(name) !== undefined) {

                document.getElementById(name).getElementsByClassName(svgWrapper)[0].appendChild(image);
            } else {

                console.alert("what the hell went wrong while inserting svgs?!");
                alert("What the hell went wrong while inserting svgs?!");
            }

        }   
    }
});