1

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

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

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

4

2 回答 2

2

您可以使用 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
  });
});

从箱线图示例中，这将打开“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 都需要自己的参考。上面的两个代码块在几件事上使用了相同的变量名，所以他们会互相踩踏。如果您希望将这两个都放在一个页面上，您只需重命名变量，使它们是唯一的。

于 2012-12-01T21:48:49.560 回答
0 
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 中的错​​误参数？

于 2012-12-26T21:25:03.893 回答