Question

我的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容器上绘制大量此类文本。因此，当我单击此标签时，它不仅会更改我想要的文本。它也改变了其他地方的文字！我不希望这样。我该如何预防？

我真的只需要一种可以在click函数中解决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");
            }
          );

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

1 个答案: