javascript - 如何从该文本的 onclick 方法中更改 d3.js 文本条目？

Question

我的 AngularJS 应用程序使用 d3.js 绘制漂亮的图表。

在绘制此图表时，它会在屏幕上绘制一些文本。我想根据 myCondition 的 bool 值在有人点击它时更改该文本。我是这样做的:

          var nodeEnter = node.enter()

          var myLabel = nodeEnter.append("text")
              .attr("x", 50)
              .attr("dy", "3")
              .text("Hello World")
              .style("fill-opacity", 0)
              .style("cursor", "pointer")
              .on("click", function(d) {
                  if (myCondition) 
                      myLabel.text("Mars");
                  else
                      myLabel.text("Venus");
                }
              );

它有点管用。文本的值确实从 Hello World 更改为 Mars 或 Venus。但有一个问题。此代码在递归函数和循环内调用。该递归 + 循环使用相同的代码在 SVG 容器上绘制大量此类文本。所以当我点击这个标签时，它不仅改变了我想要的文本。它还会更改其他地方的文本!我不想要那个。我该如何预防？

我真的只需要一种方法，我可以在点击函数中处理 this 或 myself，这样它就知道我在谈论对象。怎么办？

Answer 1

在不知道您的递归函数和循环的情况下，我将尝试两种不同的方法，希望其中一种可行。

第一个是将 this 用于点击事件:

var myLabel = nodeEnter.append("text")
          .attr("x", 50)
          .attr("dy", "3")
          .text("Hello World")
          .style("fill-opacity", 0)
          .style("cursor", "pointer")
          .on("click", function(d) {
              if (myCondition) 
                  d3.select(this).text("Mars");
              else
                  d3.select(this).text("Venus");
            }
          );

如果这不起作用，您可以尝试为不同的 myLabel 文本设置一个特定的类。这样做，即使您的 SVG 中有多个 myLabel，每个都有一个唯一的类。假设 index 是循环的特定值(如 i)。所以，你可以试试:

var myLabel = nodeEnter.append("text")
          .attr("x", 50)
          .attr("dy", "3")
          .attr("class", "myLabel" + index)//index is any value unique for the loop
          .text("Hello World")
          .style("fill-opacity", 0)
          .style("cursor", "pointer")
          .on("click", function(d) {
              if (myCondition) 
                  d3.selectAll(".myLabel" + index).text("Mars");
              else
                  d3.selectAll(".myLabel" + index).text("Venus");
            }
          );