力シミュレーションノードに複数のアイテムを追加するにはどうすればいいですか？

Question

私はD3 v4を使用しており、ノードに複数の項目を追加することはできません。下のコードでは、私の力のシミュレーションの一環としてイメージを表示するテキストを取得しようとしています。画像とテキストの両方が画面の周りを一緒に移動する必要があります。私はイメージかテキストのどちらかを追加するだけで、両方をグループ化することはできません。私がこれを実行すると、コーナーに1つのノードが表示されます。

this.node = this.d3Graph.append("g") 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(Nodes) 
    .enter() 
    .append("svg:image") 
    .attr("xlink:href", 'https://seeklogo.com/images/T/twitter-2012-negative-logo-5C6C1F1521-seeklogo.com.png') 
    .attr("height", 50) 
    .attr("width", 50) 
    .append("text") 
    .attr("x", 20) 
    .attr("y", 20) 
    .attr("fill", "black") 
    .text("test text"); 

this.force.on('tick', this.tickActions); 

tickActions() { 
    this.node 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
     }) 

    this.force 
     .restart() 
} 

Answer 1

あなたは<image>要素に<text>要素を追加することはできません。 <g>に<text>を追加する必要があります。

最も簡単な解決策は、あなたの選択を破っている。ここで

this.node = this.d3Graph.selectAll(null) 
    .data(Nodes) 
    .enter() 
    .append("g") 
    .attr("class", "nodes"); 

this.node.append("svg:image") 
    .attr("xlink:href", 'https://seeklogo.com/images/T/twitter-2012-negative-logo-5C6C1F1521-seeklogo.com.png') 
    .attr("height", 50) 
    .attr("width", 50); 

this.node.append("text") 
    .attr("x", 20) 
    .attr("y", 20) 
    .attr("fill", "black") 
    .text("test text"); 

我々は入力選択で<g>要素を作成するためにデータを使用しています。次に、各<g>要素に、<image>と<text>を子として追加します。