D3 .append("text")

Question

I am trying to figure out how .append("text") works. Can I append a text element to a node and a different text element to a link? For example by d3.selectAll("circle").append("text") and later d3.selectAll("line").append("text")? Which should work.

Now lets say I want to "fill" the text for the circles with different data as the fill from the lines. I am asking this, because for me it looks like .append("text") works for all elements but if I want to fill it with data I can´t choose from different data sources.

You can't append a child text element to a circle element . However, you could append both to a parent `g`. Instead of appending circles to start, you append a `g`, then append circle and text, eg: `g.append("circle").... ` and `g.append("text").....`. Same for lines, text elements cannot be appended to a shape, that's invalid SVG. — Andrew Reid, Feb 04 '21 at 16:38
Try [this](https://stackoverflow.com/q/11102795/7106086) or [this](https://stackoverflow.com/q/37640027/7106086) for some more information regarding circles and text in a force layout context. — Andrew Reid, Feb 04 '21 at 16:40

score -1 · Accepted Answer · answered Feb 04 '21 at 16:50

Icoded, You only need to add the .link class to your selection:

        var icons = svg.selectAll("text.link")
            .data(data_nodes)
            .enter()
            .append("text")
            .attr("class", "icon")
            .attr("text-anchor", "middle")
            .attr("dominant-baseline", "central")
            .style("font-family", "FontAwesome")
            .style("font-size", "30px")
            .text(function (d) { return d.icon; })
            .call(d3.drag()
                .on("start", dragStarted)
                .on("drag", dragged)
                .on("end", dragEnded)
            )

D3 .append("text")

1 Answers1