d3.js - 是否有一个选择查询可以获取除我当前选择之外的所有内容？

Question

在我的 d3js 应用程序中，当用户将鼠标悬停在特定圆圈上时，我会将其放大。那没问题。同时，我想选择“所有其他”并将它们变小。什么是捕获“所有其他圈子”的好查询？

Answer 1

您可以使用selection.filter或常用 selection.select 的鲜为人知的函数形式根据您的需要。

如果您使用 key functions 将 DOM 元素绑定(bind)到数据，这是推荐的方式，然后您可以过滤选择的键: 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()
        // ...
});