当用户单击文本时，如何用D3.js切换svg文本元素的值？

Question

我刚刚开始学习D3.js，并编写了一个小程序来测试我计划在更大的程序中实现的一些想法。 参考此处的代码，文本的初始值为0.我试图在用户单击文本时将值在1和0之间切换。 我编码的内容出现了问题。（“点击”...）因为文本没有变为1.我做错了什么？

我找到了更新.attr的例子，但我找不到任何关于以我想要的方式切换.text的内容。

            var txt1 = g.append("text")
                        .attr("id", "txt1")
                        .text("0")
                        .attr("x", 10)
                        .attr("y", 17)
                        .attr("font-family", "Arial")
                        .attr("font-size", "12")
                        .attr("fill", "black")   
                        .on("click", function(){
                            if (d3.select(this).text === "0"){
                                d3.select(this).text("1")
                            }
                            else{
                                d3.select(this).text("0");
                            }
                        } )

当我第一次点击文本元素时，我希望看到它变为“1”。

Answer 1

要直接获取SVG元素的文本内容，可以在现代浏览器中使用textContent或innerHTML 。 例如：

 var svg = d3.select("svg") var txt1 = svg.append("text") .text("0") .attr("x", 10) .attr("y", 20) .on("click", function() { console.log(this.textContent) }) 

 <script src="https://d3js.org/d3.v5.min.js"></script> <svg></svg> 

但是，因为您使用的是D3选择而不是SVG节点，所以应该使用text作为getter，即text() 。 顺便说一句， text()内部使用textContent ：

export default function(value) {
  return arguments.length
      ? this.each(value == null
          ? textRemove : (typeof value === "function"
          ? textFunction
          : textConstant)(value))
      : this.node().textContent;
}

最后，你不需要if block。 要在0和1之间切换，只需执行以下操作：

this.textContent = 1 - (+this.textContent);

您甚至可以删除一元加号，因为该字符串无论如何都将转换为数字：

this.textContent = 1 - this.textContent;

这是片段：

 var svg = d3.select("svg") var txt1 = svg.append("text") .text("0") .attr("x", 10) .attr("y", 20) .on("click", function() { this.textContent = 1 - (+this.textContent); }) 

 <script src="https://d3js.org/d3.v5.min.js"></script> <svg></svg>