Updating Text element

[hilay khatri]

Hi, I got a quick question regarding how to update data in text.

So my code looks like these:

some_var.append('svg:text')
.attr('class', 'abc')
.attr('text-anchor', 'end')
.text(some_other_variable);

What I want to do is when I call a callback function, the value in the
"some_other_variable" variables get updated but its not shown on the
page. Any idea how to change it?

[Scott Murray]

Sure thing. As you discovered, just updating the value of some_other_variable won't also change the text in your SVG element. So whenever some_other_variable is updated, you'll also have to explicitly overwrite the old value in the text element:

textElement.text(some_other_variable);

Of course, to do that you'll need some way to identify the textElement, so you can call text() on it. You could either do that by storing a reference to it in a variable, by changing your code below to:

var textElement = some_var.append('svg:text')

.attr('class', 'abc')
.attr('text-anchor', 'end')
.text(some_other_variable);

Or just use d3.select() to reselect it:

d3.select("text.abc").text(some_other_variable);

[hilay khatri]

Yes, that worked. Thank you so much.