Is it possible to append a new text element at the end of the data label by clicking on that particular text? I have attempted to implement this in my code but the additional text is not being displayed as expected:
circleGroup.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function (d) {
if (d.label) {
return d.label;
}
return "";
})
.attr("x", function (d) {
return x(d.time) + 6;
})
.attr("y", function (d) {
return y(d.plotY) + 4;
})
.attr("font-size", "10px")
.attr("fill", "#2d3d45")
.on("click", function(d) {
d3.select(this).append("text").text("[A]").attr("x", function(d) {return x(d.time) + 25;}).attr("y", function(d) { return y(d.plotY) + 4;});
});
Despite appending it to the data label, the "[A]" text is not visible.
https://i.sstatic.net/S8OTJ.png
Why isn't the addition of the "[A]" text displaying properly after being appended to the parent text element?