5

「D3.js を使用して XML を HTML テーブルとして表示する」という例で遊んで、 D3.js APIを試してみました。コツを掴んでいると思いますが、 が何をするのかよく理解できません.selectAll()し、ドキュメントもあまり役に立ちません。

例を見ると、17 行目: var td = tr.selectAll("td"). これを と書くこともできtr.selectAll("tr")、まったく同じテーブル/ページが返されます。実際、私は書くことができtr.selectAll("SomethingCompletelyRandom")、それはまだ機能しますが、削除することはできません.selectAll().

ここで何が起こっているのですか？何をし.selectAll()ますか？そして、それはセレクターにどのように依存しますか?

4

2 に答える 2

4

あなたが指しているAPIリンクは、前の選択（サブ選択です）でselectAllを使用しているため、見る意味がないかもしれません（そして混乱するかもしれません）。見るドキュメントの関連部分はこちら、より一般的には、その選択ドキュメント ページの紹介 (こちら) 。

tdここで と の両方を使用する理由trは、どちらの場合も最初の選択で何も返されないためです (選択元の場所 にはtrまだ何も追加されていないためです)。作成するものを選択するのが標準的な方法です。 、これをアニメーションに拡張して更新すると非常に重要になるためです。

Three Little CirclesとThinking with Joinsチュートリアルを見ることをお勧めします

于 2013-03-06T23:04:56.237 に答える
3

<td>親ノードの子であるすべてのノードを選択し<tr>ます。D3はこれを配列オブジェクトとして返します。つまり、ノードselectAll()の配列を含む配列をオブジェクトとして返し<td>、各オブジェクトで他のd3関数を呼び出すことができます。また、舞台裏で何が起こっているのかを理解する良い方法は、Chromeデベロッパーツールを使用して、コンソールでコードを実行することです。

たとえば、次のテーブルがあるとします。

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

コンソールで実行するd3.selectAll("td")と、次のような結果が得られます。

[Array[3]]  // A two dimensional array that contains 3 of the "td" nodes, each of of which is an object.
  >0: td       // A D3 selection object.
  >1: td
  >2: td
   length: 3
   parentNode: document
   __proto__: Array[0]
于 2013-03-06T23:03:35.957 に答える