D3-显示/隐藏仅单击的节点的文本 [英] D3 - show/hide text of only clicked node

问题描述

我试图单击显示/隐藏D3中节点的文本.我尝试使用以下代码:

I am trying to show/hide text of a node in D3 on click. I tried using the following code:

var node = svg.selectAll(".node")
  .data(json.nodes)
  (...)

node.on("click", function() {
  if (textShowing) {
    node.select("text").style("visibility", "hidden");
  } else {
    node.select("text").style("visibility", "visible");
  }
    textShowing = !textShowing;
 });

该代码将导致所有节点的文本属性在单击其中的任何一个时显示/消失.

The code results in text property of all nodes showing/disappearing on click of any of those.

如何影响仅单击节点的text属性?

How can I affect the text property of only the clicked node?

推荐答案

node是包含所有组的选择(我想它们是组，因为您没有复制/粘贴整个选择).

node is a selection containing all your groups (I suppose they are groups, since you didn't copy/paste the entire selection).

如果只想在被单击的组中执行任何操作，则必须使用d3.select(this)进行选择，该操作将选择当前(在您的情况下为被单击的)DOM元素.

If you want to do anything only in the clicked group, you have to select it using d3.select(this), which selects the current (in your case, the clicked) DOM element.

因此，而不是:

node.select("text")

应该是:

d3.select(this).select("text")

这篇关于D3-显示/隐藏仅单击的节点的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！