How To Correctly Update The Text Value Of An Input Element In A D3.js Transition

I've been trying, step by step, to convert some very nice but static & non-d3 code for dynamic animation in a d3.js visualisation. (Though not directly relevant to this problem

Solution 1:

There are a couple things going on here, neither of which are directly related to d3. However, there are also some d3-related things to be aware of as you fix your code, so I've indicated them in italics below.

First, setting .text() won't work on an <input>, because it changes the .textContent property (which is ignored -- input elements are empty).

Even if you used transition().text() on a valid text container element, you wouldn't see a "transition" -- the text would just instantaneously change after the transition delay.

Second, the valueattribute of an input is not the same as the valueproperty (i.e. element.value). The attribute (which is what you'd include in the markup) defines the initial value for the input element, before any user or script interaction. Changing it after the page is loaded has no effect. The property, in contrast, defines the current value of the field, regardless of whether you change it in the script or whether the user changes it by typing.

See this fiddle (which only uses plain Javascript, not d3): http://fiddle.jshell.net/FVF29/

var i = document.getElementById("i");
i = i;
i.setAttribute("value", "Stuff");
i.value="Good Stuff";
i.setAttribute("value", "Other Stuff");

Neither setAttribute call affects the display -- the text box contains "Good Stuff" -- although if you check the DOM you'll see that the attribute has been changed.

Although it's not often used, d3 has a method for changing element properties for the elements in a selection, selection.property(propertyName, valueOrFunction). However, there is no equivalent function for transitions.

You could make a valid feature request that there should be a transition.property() function. Based on your example, I can certainly see a use for it -- maybe you have a number slider or color input, and you want the displayed value to change smoothly instead of instantaneously jumping to the value you're setting it.

However, that still wouldn't work well in your case. Assuming the property transition function was implemented the same as an attribute or style transition, the default transition for a string value breaks the string into number and non-number segments. The non-number segments change immediately, the numbers transition. Which would be weird and random if you were changing from "Cmin6" to "Amaj7" -- you'd end up with a chord like "Amaj6.569087098608760876"!

In conclusion: I have no idea why you want to use a transition to change the text field, or what you expect the in-between values to be. If you have a clear idea of how you want in-between values to be calculated, use a custom tween function that directly sets this.value. (For an example of how to do this, see the fiddle I created for this answer, which uses a custom tween to set this.textContent.) Otherwise, skip the transition and just use:

input.property("value", waveplot.chordname);