Question

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

最初我和Raphaeljs一起玩，但对于我来说，作为一个JS新手，很难找到有用的tuts / docs。我正在使用webtool将SVG转换为JSON对象，然后将它们包含在1个js文件中，这是很多工作剥离标签和东西。这样可以节省HTTP请求。现在我想尝试与D3.js一样，看看哪一个适合我。

有关使用D3导入多SVG文件的任何想法吗？

Answer 1

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

如果您正在从JSON对象中读取SVG，则只需读入多个JSONS。

以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
  });
});

从Box Plot示例中，这将打开“morley.csv”并处理数据。

d3.json("flare.json", function(error, root) {
  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }))
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return color(d.packageName); });

  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });
});

从气泡图示例中，这将打开“flare.json”并开始用它做事。没有什么可以阻止你在同一个文件中执行这两个操作。

与其他任何程序一样，您需要注意的是变量引用。每个SVG都需要自己的参考。上面两个代码块对几个东西使用相同的变量名，所以它们互相踩踏。如果你想在一个页面上同时使用这两个，你只需要重命名变量，使它们是唯一的。

Answer 2

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?!");
            }

        }   
    }
});

如果有人指点可能会改进这个，就像IE9一样，因为只测试Chrome和Firefox（必须安装Windows VM）。如何捕获和处理XHR中的错误参数？

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

2 个答案: