Trying to append a click function to the node text in d3

Question

I'm trying to generate a modal with information pulled from my json file when the text of a node is clicked on. I'm having trouble, so I'm just trying to generate an alert box at the moment. I think that I need to declare a variable for the node text, but I'm having trouble. Here is what I have right now:

  node.append("svg:text")
  .attr("text-anchor", "middle")
  .attr("dy", "3.5em")
  .text(function(d) { return d.name; })

  var textNodes = node.append("svg:text").text()
  .on("click", function(d, i) { alert("Hello world"); });

Or this, I don't see why this wouldn't work either.

node.append("svg:text")
  .attr("text-anchor", "middle")
  .attr("dy", "3.5em")
  .text(function(d) { return d.name; })
  .on("click", function(d) { alert("Hello world"); });

Answer 1

You are explicitly setting pointer-events: none for the text nodes (maybe a copy and paste error). Removing this line in the styles allows the click event to fire.

Answer 2

I managed to do do recogize a click on the label using something like this:

    const text = this.g.selectAll('text')
  .data(nodes)
  .enter().append('text')
    .attr('class', 'label')
    .style('fill-opacity', function(d) { return d.parent === root ? 1 : 0; })
    .style('display', function(d) { return d.parent === root ? 'inline' : 'none'; })
    .style('pointer-events', 'auto')
    .on("click", function(d) {
      d3.event.stopPropagation();
      console.log(d.data.name);
    })
    .text(function(d) { return d.data.name});