[英]How can I toggle the value of an svg text element with D3.js when user clicks the text?
I have just started to learn D3.js and have written a small program to test some ideas that I plan to implement in a larger program. 我刚刚开始学习D3.js,并编写了一个小程序来测试我计划在更大的程序中实现的一些想法。 Referring to the code here, the initial value of the text is 0. I am trying to have the value toggle between 1 and 0 when a user clicks on the text.
参考此处的代码,文本的初始值为0.我试图在用户单击文本时将值在1和0之间切换。 There is something wrong with what I've coded in .on(“click”…) because the text does not change to 1. What am I doing wrong?
我编码的内容出现了问题。(“点击”...)因为文本没有变为1.我做错了什么?
I've found examples of updating .attr, but I can't find anything about toggling .text in the manner I want. 我找到了更新.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");
}
} )
When I click on the text element the first time I expect to see it change to "1". 当我第一次点击文本元素时,我希望看到它变为“1”。
To get the text content of the SVG element directly you can use textContent
or innerHTML
in modern browsers. 要直接获取SVG元素的文本内容,可以在现代浏览器中使用
textContent
或innerHTML
。 For instance: 例如:
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>
However, because you're using a D3 selection , not an SVG node, you should use text
as a getter, which is text()
. 但是,因为您使用的是D3选择而不是SVG节点,所以应该使用
text
作为getter,即text()
。 By the way, text()
internally uses textContent
: 顺便说一句,
text()
内部使用textContent
:
export default function(value) {
return arguments.length
? this.each(value == null
? textRemove : (typeof value === "function"
? textFunction
: textConstant)(value))
: this.node().textContent;
}
Finally, you don't need that if
block. 最后,你不需要
if
block。 To toggle between 0
and 1
, just do: 要在
0
和1
之间切换,只需执行以下操作:
this.textContent = 1 - (+this.textContent);
You can even drop the unary plus, since the string will be converted to a number anyway: 您甚至可以删除一元加号,因为该字符串无论如何都将转换为数字:
this.textContent = 1 - this.textContent;
Here is the snippet: 这是片段:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.