After creating an enter section that transitions to set the opacity to 1, I encountered an issue where the 'click' event on the circle worked but not on the text.
Interestingly, when I replaced the 'text' with a 'rect' and set the necessary attributes, both clicks functioned as expected.
Upon inspecting the DOM tree, I could see that listeners were correctly applied to both the circle and text elements.
I'm puzzled as to why using 'text' won't work with a listener. Any insights or pointers regarding this issue would be greatly appreciated.
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr('transform', function () {
return 'translate(' + source.y0 + ',' + source.x0 + ')';
})
.style('opacity', 1e-6);
nodeEnter.append('circle')
.attr('r', 1e-6)
.style('fill', function (d: any) {
return d._children ? 'lightsteelblue' : '#fff';
})
.on('click', this.circle_click);
nodeEnter.append('text')
.attr('dx', 3.5)
.attr('dy', 5.5)
.text(function (d: any) { return d.data.name; })
.style('fill-opacity', 1e-6)
.on('click', this.text_click);