テキストラベルとd3のノードのフェードアウト

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を持つ2つの要素を持つことはできません。円とテキストの両方を選択するためにこのように、テキストの異なる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とは異なり、あなたは2つの要素を持つことができ、のでしたがって、同じクラスではselectAllを使用してすべてを選択できます。

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