1つのsvgの複数の力の有向グラフ（テキスト表示の問題）

Question

複数の強制有向グラフを表示したい。好ましくは1svg要素だけを使用してください（データに基づいて異なる可能性があるため、シミュレーション全体の幅と高さを向上させるだけでなく、パフォーマンスも向上させると思います）。

最初の考えといくつかの研究で私はちょうどforループを行い、ノード/エッジ配列を再評価し、それを力向グラフを生成する関数に入れました。

for (var i = 0; i < sampleData.length; i++) 
{ 
      var nodes = [];  
    var edges = []; 

      x = x+100; //update position (i want to show grpahs side by side.)   

    root = sampleData[i]; 

    nodes.push({"name": root, "x": x, "y": y, "fixed": true, "color": "purple"}); 

     //These 2 recurisve functions generate my nodes and edges array just fine. 
    buildParents(childs, parents, test, counter);   
    buildChildren(childs, parents, test, counter); 

    //apply id to each node 
     nodes.forEach((d,i)=>d.generatedId='id'+i); 

      //build makes the force-directed layout. 
     build(nodes, edges); 

} 

これは実際に私のノードとリンクでうまく動作しているようです。私の問題は、1つのデータセットだけを渡す場合のように、テキストがすべてのノードに表示されないことです。私は、テキストは、力シミュレーションにおけるように定義した：

var nodes_text = svg.selectAll(".nodetext") 
     .data(nodes) 
     .enter() 
     .append("text") 
     .attr("class", "nodetext slds-text-heading--label") 
     .attr("text-anchor", "middle") 
     .attr("dx", -20) 
     .attr("dy", 20) 
     .text(d=>d.name) 
     .attr('opacity',0) 

私はちょうどエッジに対してノード2つのアレイ及び2つのアレイを作製し、シミュレーションにそれを通すことによって、このエラーを再現することができました。ここに私のエラーを再現する簡単なプログラムがあります： https://jsfiddle.net/mg8b46aj/9/

私はこのJFiddleを修正することで、私のプログラムにどのように置くべきかを知ることができます。

ビルド関数を2回呼び出すだけです（どちらの順序もエラーです）。左のノードにはテキストがありますが、そのうちの1つは正しいテキストフィールドではありません。また、少しドラッグすることで、テキストを「残す」ことができます。右のグラフには何もありません。

編集：右のグラフのノードをクリックすると、テキストの位置がリセットされているようです。

Answer 1

問題は、ラベルを選択するためのd3セレクタの使用にあります。 2つの別々のフォースレイアウトダイアグラムが必要なので、ラベルには以下のようなセレクタを使用する必要があります。

var nodes_text = svg.append('g') //Append new group for labels in new diagram 
     .attr("class", "labels") 
     .selectAll(".nodetext") 
     .data(nodes) 
     .enter() 
     .append("text"); 

更新フィドル：https://jsfiddle.net/gilsha/qe7bbnwn/1/