d3.js - 试图将点击功能附加到 d3 中的节点文本

Question

当单击节点的文本时，我正在尝试使用从我的 json 文件中提取的信息生成一个模式。我遇到了麻烦，所以我现在只是想生成一个警报框。我认为我需要为节点文本声明一个变量，但我遇到了麻烦。这是我现在所拥有的：

  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"); });

或者这个，我不明白为什么这也行不通。

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

您正在明确设置pointer-events: none文本节点（可能是复制和粘贴错误）。删除样式中的这一行可以触发 click 事件。

Answer 2

我设法使用这样的方法来识别标签上的点击：

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

Answer 3

要扩展主题，请使用以下功能

d3.event.stopPropagation();

如果单击文本，将使节点不展开或折叠，但如果单击名称旁边的节点圆圈，节点将继续展开和折叠。挺整洁的。