How to append multiple items to a force simulation node?

Question

I'm using D3 v4 and can't seem to get multiple items to append to a node. In the code below I'm trying to get text to appear with the image as part of my force simulation. Both the image and text need to move together around the screen. It works perfectly if I only append either the image or the text but I can't get it to group both. When I run this it just shows 1 node in the corner.

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()
}

user_5768908 · Answer

You cannot append a element to an element. You have to append the to the .

The easiest solution is breaking your selection:

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");

Here we use the data to create elements in the enter selection. Then, to each element, we append an and a as children.

How to append multiple items to a force simulation node?

1 Answers