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

Question

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

Answer 1

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

如果您使用键函数将 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()
        // ...
});