1

d3 を使用して、ページ上の円の位置と数を動的に更新したいとします。.data()、.enter()、.exit() パターンを使用してこれを行うことができます。これが実際の例です。 http://jsfiddle.net/csaid/MFBye/6/

function updatePositions(data) {

  var circles = svg.selectAll("circle").data(data);

  circles.enter().append("circle");

  circles.exit().remove();

  circles.attr("r", 6)
      .attr("cx", 50)
      .attr("cy", function (d) {
      return 20 * d
  });

}

ただし、円の代わりに外部 SVG で同じことをしようとすると、最初の更新後の新しいデータ ポイントの多くがページに表示されません。例: http://jsfiddle.net/csaid/bmdQz/8/

function updatePositions(data) {

    var gs = svg.selectAll("g")
        .data(data);

    gs.enter().append("g");

    gs.exit().remove();

    gs.attr("transform", function (d, i) {
        return "translate(50," + d * 20 + ")";
    })

        .each(function (d, i) {
        var car = this.appendChild(importedNode.cloneNode(true));
        d3.select(car).select("path")
    });
}

これは、外部 SVG オブジェクトを追加するために使用される .each() と関係があると思われますが、これを回避する方法がわかりません。また、「cx」および「cy」属性は円に固有のものであるため、外部 SVG にどのように使用できるかはわかりません。

前もって感謝します！

4

1 に答える 1

0

コードには 2 つの問題があります。最初の問題、およびすべてのデータ ポイントが表示されない理由は、外部 SVG にg選択している要素が含まれていることです。これが意味することは、最初に要素を追加した後、その後の.selectAll("g")選択にはそれらの外部 SVG からの要素が含まれることになります。これは、渡すデータが.data()それらと一致するため、選択内容に期待するものが含まれていないことを意味します。gこれは、明示的に追加する要素にクラスを追加し、それに応じて選択することで簡単に修正できます。

2 つ目の問題は、外部 SVG を更新選択の一部として追加するコードを実行していることです。これは、これらの要素が複数回追加されることを意味します。(重複しているため) 気付くことはありませんが、望ましいことでもありません。これは、ノードを複製する呼び出しを選択範囲に移動することで簡単に修正でき.enter()ます。

ここでjsfiddle を完成させてください。cxとについての質問についてcyは、実際には必要ありません。transformコードで既に行っているように、属性を使用して追加する要素の位置を設定できます。

于 2013-09-07T22:32:19.993 に答える