淡出文本标签以及 d3 中的节点答案

【问题标题】：fading out text label as well as nodes in d3淡出文本标签以及 d3 中的节点
【发布时间】：2017-02-13 06:58:34
【问题描述】：

我有一个过滤器功能，可以淡出其余节点并突出显示选定的节点集。我还希望与节点关联的标签反映相同，即淡出其余部分，仅显示与所选节点关联的标签。我有以下sn-ps：

// define properties of nodes
  var node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("class", "dataNodes")
    .attr('id', function(d){ return 'id' + d.id; });


  // define visual properties of node labels
 var text = g.append("g")
    .attr("class", "labels")
    .selectAll("text")
    .data(graph.nodes)
    .enter().append("text")
    .attr("font-size","6px")
    .attr("dx", 6)
    .attr('id', function(d){ return 'id' + d.id; })
    .attr("dy", ".15em")
    .text(function(d) { 
            return d.name;
       });


    function filterByName(relevantArray){

      d3.selectAll(".dataNodes").transition().duration(toggleTime).style("opacity", 0.3);
            d3.selectAll(".labels").transition().duration(toggleTime).style("opacity", 0.3);
            d3.selectAll(relevantArray).transition().duration(toggleTime).style("opacity", 1);

    }

过滤器函数通过一组 ID 传递，用于设置节点和标签的不透明度。既然节点 ID 和关联标签的 ID 相同，为什么只有节点的属性会受到函数的影响，而不是标签？

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

您刚刚在这里回答了您自己的问题：

由于节点ID和关联标签的ID相同，...

ID 是唯一的。不能有两个具有相同 ID 的元素。

因此，为文本设置不同的 ID...

 .attr('id', function(d){ return 'idCircle' + d.id; })

对于圆圈...

 .attr('id', function(d){ return 'idLabel' + d.id; })

但是，在您的情况下，稍后要同时选择圆圈和文本，您可以简单地使用 class 代替：

.attr('class', function(d){ return 'class' + d.id; })

因为，与 ID 不同，您可以拥有两个具有相同类的元素，因此，您可以使用 selectAll 来选择所有元素：

d3.selectAll(".someClass")
    .transition()
    //etc

【讨论】：