如何用d3更新文本输入的内容？

Question

我正在尝试在D3中创建一个需要将数据推送到文本输入中的文本输入控件。我可以用

设置初始值

d3.selectAll('#textfield')
    .data([number])
    .attr('value', function(d) { return d })

但是，当有人编辑文本然后尝试外部更新时，这没有用。有没有办法将内容设置为某个任意值？

我有the code in JsFiddle。

更新

我找到了workaround：

var node = d3.selectAll('#textfield')
    .data([number])
    .node()
node.value = number

但我不确定这是不是正确的做法。有线索吗？

Answer 1

您设置 value属性的值，value恰好是一个特殊属性，与setAttribute函数不兼容（ d3内部用于设置属性。）

这种方法并不是更好，但更务实地使用D3：

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

演示：http://jsfiddle.net/LGtDD/3/

---

此外，可以（并且可能应该）使用普通JS来执行此操作，除非您有一个令人信服的论据。使用D3可能只是过度杀伤：

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

Answer 2

您可以使用设置文本输入值

d3.select('#textfield').property('value', "<your desired text>");

Answer 3

这似乎也有效：

function changeValue() {
    var number = Math.round(Math.random()*100);
    d3.select('#textfield')[0][0].value = number;
}