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.

Answer 1

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