1

現在、私は D3.js をいじっています。D3.js は Web ページに複数の svg 要素を描画するのに適しているかどうか疑問に思っていました。d3.xml メソッドを見つけて動作させました。

最初は Raphaeljs で遊んでいましたが、JS の初心者である私にとって、便利なチュートリアルやドキュメントを見つけるのは困難です。私は 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 Web サイトの最初の 2 つの例を取り上げます...

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 には独自の参照が必要です。上記の 2 つのコード ブロックは、いくつかの目的で同じ変数名を使用しているため、相互に影響を及ぼします。1 つのページにこれらの両方が必要な場合は、変数が一意になるように変数の名前を変更するだけで済みます。

于 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 に答える