如何用d3更新文本輸入的內容？

Question

我試圖在D3中創建一個文本輸入控件，需要將數據推送到文本輸入。 我能夠設置初始值

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

但是，一旦有人編輯文本然后嘗試外部更新，這是沒用的。 有沒有辦法將內容設置為某個任意值？

我在JsFiddle中得到了代碼 。

更新：

我找到了一個解決方法 ：

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;
}