javascript - How to correctly update the text value of an input element in a d3.js transition - Stack Overflow

admin管理员组

文章数量:1315034

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, the original code 'simply' -haha- accepts a user-supplied chordname such as 'Amaj7', breaks it down into it's ponent notes and displays the associated waveforms. I'm trying to create an transition-driven animation based on an array of chordnames.)

For my part, for each successful code update (to a d3.js friendly version) achieved, the source code was saved to act as a working parison with the next.

In the current update to the code, I've hit a glitch trying to incorporate a transition. The transition itself is well proven, and (by means of logging) can be seen to fire as expected.

During the transition, the desired attribute value changes (the next chordname to be handled, and the goal of the immediate transition) are failing. Comparing the previous (working) version with the current:

Initial creation, mon to both, but in a separate file and so element is accessible only via the DOM

var input = container
.append("input")
.attr("class", wavebase.animation_type + "_input")
.attr("id", "chordinput")
.attr("type", "text")
.attr("value","Amaj7");

Old

var input = document.getElementById('chordinput');

input.addEventListener('change', inputChanged, false);
inputChanged.call(input);

and (pre-transition):

input.setAttribute("value", (waveplot.chordname + "\x0A")); 
inputChanged.call(input);

Let's be clear: the above works.

New

var input = container
.select("#chordinput")

input.on('change', inputChanged, false);
inputChanged.call(input);

Later, neither this:

input
.transition()
.text(function() {
    return (waveplot.chordname + "\x0A");
})

..nor this:

input
.transition()
.attr("value", function() {
    return (waveplot.chordname + "\x0A");
});

..nor variants minus the return character ("\x0A") result in update of the input element's value field. waveplot.chordname is, incidentally, always correctly defined.

Given that not even the original Amaj7 is not recognised in the new code, my gut feeling is that the problem lies with the line

input.on('change', inputChanged, false);

Clearly, with transitions in play, my aim is to trap multiple events using this line. What am I failing to do, or doing wrong? Must I for example use a different trigger (neither 'submit' nor 'click' have any impact), use d3.dispatch(), or even map each event to it's own ('change.n') handler?

Note: much as I'd like to demo this in the likes of a jsfiddle, the whole thing is embedded in a framework, aka for the moment impractical..

Thanks Thug

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, the original code 'simply' -haha- accepts a user-supplied chordname such as 'Amaj7', breaks it down into it's ponent notes and displays the associated waveforms. I'm trying to create an transition-driven animation based on an array of chordnames.)

For my part, for each successful code update (to a d3.js friendly version) achieved, the source code was saved to act as a working parison with the next.

In the current update to the code, I've hit a glitch trying to incorporate a transition. The transition itself is well proven, and (by means of logging) can be seen to fire as expected.

During the transition, the desired attribute value changes (the next chordname to be handled, and the goal of the immediate transition) are failing. Comparing the previous (working) version with the current:

Initial creation, mon to both, but in a separate file and so element is accessible only via the DOM

var input = container
.append("input")
.attr("class", wavebase.animation_type + "_input")
.attr("id", "chordinput")
.attr("type", "text")
.attr("value","Amaj7");

Old

var input = document.getElementById('chordinput');

input.addEventListener('change', inputChanged, false);
inputChanged.call(input);

and (pre-transition):

input.setAttribute("value", (waveplot.chordname + "\x0A")); 
inputChanged.call(input);

Let's be clear: the above works.

New

var input = container
.select("#chordinput")

input.on('change', inputChanged, false);
inputChanged.call(input);

Later, neither this:

input
.transition()
.text(function() {
    return (waveplot.chordname + "\x0A");
})

..nor this:

input
.transition()
.attr("value", function() {
    return (waveplot.chordname + "\x0A");
});

..nor variants minus the return character ("\x0A") result in update of the input element's value field. waveplot.chordname is, incidentally, always correctly defined.

Given that not even the original Amaj7 is not recognised in the new code, my gut feeling is that the problem lies with the line

input.on('change', inputChanged, false);

Clearly, with transitions in play, my aim is to trap multiple events using this line. What am I failing to do, or doing wrong? Must I for example use a different trigger (neither 'submit' nor 'click' have any impact), use d3.dispatch(), or even map each event to it's own ('change.n') handler?

Note: much as I'd like to demo this in the likes of a jsfiddle, the whole thing is embedded in a framework, aka for the moment impractical..

Thanks Thug

• javascript
• events
• input
• d3.js
• transition

Share Improve this question Follow edited Jul 29, 2014 at 16:49 user1019696 asked Jul 29, 2014 at 12:24 user1019696user1019696 46311 gold badge55 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 value attribute of an input is not the same as the value property (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/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);

本文标签： javascriptHow to correctly update the text value of an input element in a d3js transitionStack Overflow