30

既存の要素に新しい兄弟を挿入する際に問題が発生しました。

私はこの構造を持っています

<svg> 
  <g> 
    <path class="data"></path> 
    <path class="data"></path> 
  </g>
</svg>

この構造が欲しい

<svg> 
  <g> 
    <path class="data"></path> 
    <text></text>
    <path class="data"></path> 
    <text></text>
  </g>
</svg>

しかし、d3.js挿入関数を使用する場合

d3.select("g").insert("text", "path.data");

私は次のようになります（クラス名で選択したにもかかわらず）

<svg> 
  <g> 
    <text></text>
    <path class="data"></path> 
    <path class="data"></path> 
  </g>
</svg>

何か案は？

4

1 に答える 1

36

まず、挿入関数の2番目の引数がbeforeセレクターであることに注意してください。さらに、連鎖操作は左側の結果に作用します。

だからあなたはやった

// select all the g elements (only 1)
d3.select("g")
    // For each g, insert a text element before "path.data"
    .insert("text", "path.data");

子「.data」ごとに操作を実行する必要があるため、「。data」要素ごとに選択して、それぞれに対してアクションを実行する必要があります。d3が、特定の子の後に要素を挿入することをどのように期待しているかは完全にはわかりません。DOM APIを使用して要素の作成と挿入を行う方がはるかに簡単ですが、d3.each関数を使用して選択を繰り返します。

d3.selectAll("g > .data").each(function () {
    var t = document.createElement('text');
    this.parentNode.insertBefore(t, this.nextSibling);       
});​
于 2012-10-23T13:56:13.487 に答える