Select class 的所有 DOM 个节点，除了 javascript 中的一个节点

Question

我正在使用 D3.js，实际上我正在尝试 select 具有特定 class 的所有元素，但特定事件 "mouseover" 中的元素除外。我尝试了不同类型的解决方案，但没有一个有效或只是部分有效。

这是我的第一个解决方案：

.on("mouseover",
    function(d) {
        d3.select(this)
           .style("stroke-width", "4px");

        var selectedMethod = document.getElementById(d.name + "-line");
        var notSelectedMethods = $(".method").not(selectedMethod);
        d3.selectAll(notSelectedMethods)
           .style("opacity", 0.2);  

        var selectedLegend = document.getElementById(d.name + "-legend");
        var notSelectedLegends = $(".legend").not(selectedLegend);
        d3.selectAll(notSelectedLegends)
            .style("opacity", 0.2);
    }
)

调试我可以看到 notSelectedMethods 存储所有忽略 not() 函数的节点。这对于第一部分是正确的，因为对于第二部分的片段工作。

环顾四周，我发现 this one，所以我尝试了他们所说的（关注第一部分，selection 行），但没有人工作。

d3.selectAll(".method")
    .style("opacity",
        function() {
            return (this === selectedMethod) ? 1.0 : 0.2;
        }
    );

或

var selectedMethod = this;
d3.selectAll(".method")
    .filter(
        function(n, i) {
            return (this !== selectedMethod);
        }
    )
    .style("opacity", 0.2);

或

d3.selectAll(".method:not(." + this.id + ")")
    .style("opacity", 0.2);

我该如何解决这个问题？

更新：

@TomB 和@altocumulus 为我指明了正确的方向。稍作改动，代码现在可以正常工作了。

var selectedMethod = d.name;
d3.selectAll(".method")
    .style("opacity",
        function(e) {
            return (e.name === selectedMethod) ? 1.0 : 0.2;
        }
    );

我没有提到 d 元素的数据结构，那是我的错。这个狙击手完成了这项工作。我觉得我不能做得更好，对吗？

更新 2：

我高兴得太早了。我试图复制以前的 on mouseover 解决图例以更改线条和图例（与以前相同的逻辑）

.on("mouseover",
    function(d) {

        // Change opacity of legend's elements
        var selectedLegend = d.name;
        d3.selectAll(".legend")
            .style("opacity",
                function(e) {
                    return (e.name === selectedLegend) ? 1.0 : 0.2;
                }
        );

        // Change width of selected line
        var selectedMethod = d.name;
        d3.selectAll(".method")
            .style("stroke-width",
                function(e) {
                    return (e.name === selectedMethod) ? "4.5px" : "1.5px";
                }
        );

        // Change opacity of no-selected lines
        d3.selectAll(".method")
            .style("opacity",
                function(e) {
                    return (e.name === selectedMethod) ? 1.0 : 0.2;
                }
        );

我不知道为什么，我更改宽度的片段不起作用（宽度没有改变）。

Answer 1

你必须像这样比较 id :

.on("mouseover", function(d) {
    d3.select(this).style("stroke-width", "4px");

    var selectedLine = d.name + "-line";
    d3.selectAll(".method")
      .style("opacity", function(e) {
        return (e.id === selectedLine) ? 1.0 : 0.2;
    });
})

所有具有 "method" class 的项目的不透明度为 1，除了具有 id === d.name + "-line"

的项目

你无法比较 JQuery 项和 D3 项，看看 http://collaboradev.com/2014/03/18/d3-and-jquery-interoperability/

Answer 2

和@altocumulus 为我指明了正确的方向。稍作改动，代码现在可以正常工作了。

var selectedMethod = d.name;
d3.selectAll(".method")
    .style("opacity",
        function(e) {
            return (e.name === selectedMethod) ? 1.0 : 0.2;
        }
    );

我没有提到 d 元素的数据结构，那是我的错。

Select class 的所有 DOM 个节点，除了 javascript 中的一个节点

Select all DOM node of a class except one in javascript

javascript

selection

d3.js