Question

我刚刚开始学习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”。

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作为吸气剂，即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>

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

1 个答案: