如何从该文本的 onclick 方法中更改 d3.js 文本输入

How to change d3.js text entry from within that text's onclick method?

本文关键字：文本 d3 输入 js onclick 方法      更新时间：2023-09-26

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

在绘制此图表时，它使用在屏幕上绘制一些文本。我想在有人根据 myCondition 的布尔值单击该文本时更改该文本。我是这样做的：

          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，以便它知道我在谈论对象。如何？

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

第一个是将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");
            }
          );
相关文章：