Question

我有一个过滤功能，淡出其余节点并突出显示所选的节点集。我还希望与节点相关联的标签反映相同的内容，即淡出其余部分，并仅显示与所选节点相关联的标签。我有以下几个片段：

// 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相同，为什么只有节点的属性受到函数的影响而不受标签的影响？

Answer 1

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

由于节点和相关标签的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

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

1 个答案: