时间戳

首页 > 解决方案 > 当用户单击文本时，如何使用 D3.js 切换 svg 文本元素的值？

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

问题描述

我刚刚开始学习 D3.js 并编写了一个小程序来测试我计划在更大的程序中实现的一些想法。参考这里的代码，文本的初始值为 0。当用户单击文本时，我试图让值在 1 和 0 之间切换。我在 .on(“click”...) 中编码的内容有问题，因为文本没有更改为 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”。

标签： javascriptd3.jssvg

解决方案

要直接获取 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 selection，而不是 SVG 节点，所以您应该使用textgetter，即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块。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>

推荐阅读