Equivalent of jQuery's 'not' selector in D3.js?

后端 未结 3 1316
隐瞒了意图╮
隐瞒了意图╮ 2020-12-30 01:28

Working in D3.js, I\'d like to select all the elements that match a selector except for the current element.

The reason is that I\'d like to mouseover a ci

3条回答
  •  刺人心
    刺人心 (楼主)
    2020-12-30 02:11

    If your elements have an unique CSS-accessible identifiers, you can use the :not() selector. Some potential examples:

    d3.selectAll("circle.prospect:not(#" + this.id + ")");
    d3.selectAll("circle.prospect:not(." + someUniqueClassFrom(d) + ")");
    d3.selectAll("circle.prospect:not([uniqueAttr=" + this.getAttribute('uniqueAttr') + "])");
    

    The reason d3.selectAll('circle.prospect:not(this)') doesn't work is because it's just literally saying to filter out any elements — which is obviously not your intent, and since it's already selecting only elements would have no effect regardless.

    Even if you don't generally apply some unique DOM attribute, there's no reason you couldn't set one temporarily:

    vis.selectAll('circle.prospect')
    .on("mouseover", function(d) {
        this.id = 'temp-' + Math.random();
        d3.selectAll('circle.prospect:not(#' + this.id + ')').transition().style('opacity','0.5');
        d3.select(this).attr('opacity','1.0');
        this.id = '';
      });
    

    That said, however, if your elements don't already have an ID assigned already, I think Ian Roberts' solution is probably what I would do instead of this temporary identifier hack.

提交回复
热议问题