javascript - 如何使用 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;