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

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

尝试将单击函数附加到d3中的节点文本

3 个答案: