12

ドラッグマルチプルの例で遊んでいますが、説明できないことに気づきました。

このスニペットでは：

var svg = d3.select("body").selectAll("svg")
    .data(d3.range(16).map(function() { return {x: width / 2, y: height / 2}; }))
    .enter().append("svg")
    .attr("width", width)
    .attr("height", height);

に変更selectAllしましたselect。それでも機能しますが、タグの後svgに要素が追加されるようになりました。元のコードは、で、あなたが期待するよう にタグの後にそれらを追加します。</body>selectAll<body>

元のhtmlにはハードコードされた要素が含まれていないため、両方とも空の選択を返すだけ<svg>だと思います。そのため、なぜそれらが異なる動作をもたらすのか理解できません。selectselectAll

説明を探しています。ありがとう！

4

3 に答える 3

9

select と selectAll の基本的な違いは、select は既存の選択の階層を押しつぶすのに対し、selectAll はそれを維持することです。

したがって、selectAll を次々に使用すると、ネストされた for ループのリストのような結果になります。

http://bost.ocks.org/mike/nest/

于 2015-02-07T22:36:16.563 に答える
6

select/selectAll: Nested Selectionsに関する Mike Bostock の投稿を確認してください。

引用するには：

select と selectAll には重要な違いがあります。select は既存のグループ化を保持しますが、selectAll は新しいグループ化を作成します。したがって、select を呼び出すと、元の選択のデータ、インデックス、さらには親ノードも保持されます。

于 2013-01-30T20:02:03.190 に答える
2

ここでの他の回答は少しずれており、正しい情報源を引用していません。これは、ネスティングとは関係がありません。D3 の作成者は、結合の概念で説明しています。完全を期すために、ここでそれを確認します。

2 つのセット (配列) があります。

  1. 視覚化を推進するデータセット。
  2. そのデータセット内の各データ項目を表す HTML 要素。

これらのセットは、アプリケーションの実行中の特定の時点でまったく同じではない場合があります。そのため、常に (処理フレームごとに) 一致するように少し管理を行います。リアルタイム データ セット (ストリーム) を想像してみてください。前回は 98 個の要素しか取得できなかったかもしれませんが、現在は 100 個になっています。ページにはまだ 98 個<div>ありますが、さらに 2 個を作成する必要があります。それはまさにあなたのコードで自動的に起こることです:

  1. 呼び出すことで、「存在しなくても要素.selectAll("svg")のセットを作成する」と言っています。これを別の言い方をすると、「与えられたデータセットに一致する のセットを選択できると想像してみましょう。さて、先に進み、そのセットを作成してください。」<svg><svg>
  2. ...それはまさにそのときのこと.enter().append(...)です。逆に、新しいデータセットの要素が多すぎる場合 (以前は現在よりも多くの in 要素がデータセットにあったため)、.exit().remove(...)それを処理します。

enter作成する必要がある要素のセットです。exit削除する必要があるものです。

あなた.selectAll("svg")は何も返さないでしょうが、それは命令というよりも提案である.enter().append("svg")ため、指定されたデータセットと一致させるために必要なものを で作成します。

于 2018-12-02T14:01:57.533 に答える