How to update the contents of a text input with d3?

d3.js, html, javascript

Solution

You are setting the value of the `value` attribute and `value` just happens to be a special attribute which does not play well with `setAttribute` function (which `d3` internally uses for setting an attribute).

This approach is not much better, but more pragmatic use of `D3`:

d3.selectAll('#textfield')
    .data([number])
    .each(function (d) {
        this.value = d;
    });

Demo: http://jsfiddle.net/LGtDD/3/

Besides, one can (and perhaps should) use plain JS to do this unless you have a compelling argument against it. Using D3 for this might just be overkill:

document.getElementById('textfield').value = number;

Problem

I am trying to create a text input control in D3 that needs to push data into the text input. I am able to set the initial value with ``` d3.selectAll('#textfield') .data([number]) .attr('value', function(d) { return d }) ``` but this is of no use once someone edits the text and then tries the external update. Is there some way of setting the contents to some arbitrary value? I've got the code in JsFiddle. Update: I've found a workaround: ``` var node = d3.selectAll('#textfield') .data([number]) .node() node.value = number ``` But I'm not sure if this is the right approach. Any clues?

Original source