d3.js - 現在の選択以外のすべてを取得する選択クエリはありますか?

Question

私の d3js アプリでは、ユーザーが特定の円にカーソルを合わせると、円が拡大されます。それは問題ありません。同時に、「その他すべて」を選択して小さくしたい。「他のすべての円」を取得するための適切なクエリは何ですか?

Answer 1

必要に応じて、selection.filterまたは一般的に使用されるselection.selectのあまり知られていない機能形式を使用できます。

推奨される方法であるkey functionsを使用して DOM 要素をデータにバインドする場合、選択のキーでフィルター処理できます: http://jsfiddle.net/9TmXs/

.on('click', function (d) {

    // The clicked element returns to its original size
    d3.select(this).transition() // ...

    var circles = d3.selectAll('svg circle');
    // All other elements resize randomly.
    circles.filter(function (x) { return d.id != x.id; })
        .transition() // ...
});  

別の一般的なアプローチは、DOM 要素自体を比較することです: http://jsfiddle.net/FDt8S/

.on('click', function (d) {

    // The clicked element returns to its original size
    d3.select(this).transition() // ..

    var self = this;

    var circles = d3.selectAll('svg circle');
    // All other elements resize randomly.
    circles.filter(function (x) { return self != this; })
        .transition()
        // ...
});