d3js接受/恢复输入值

Question

我使用d3js填充一组显示关联数组值的文本输入字段.用户更改一些输入值.

var obj = {a: 'Hello', b: 'World'}
var kk = function(d){return d.key}
var kv = function(d){return d.value}
var upd = function(c){
    c.select('div.label').text(kk)
    c.select('div.input input').attr("value", kv)
}
var data = d3.entries(obj)
var prop = d3.select("div.container").selectAll("div.prop").data(data, kk)
upd(prop)
var eprop = prop.enter().append("div").attr("class", "prop")
eprop.append("div").attr("class", "label")
eprop.append("div").attr("class", "input").append("input").attr("name", kk)
upd(eprop)
prop.exit().remove()

a)从DOM更新原始关联数组(相反方向)的最佳实践
b)将DOM值恢复为原始值

我目前的解决方案是
a)迭代输入字段 d3.select("div.container").selectAll("div.prop").select('div.input input').each(function(){obj[this.name]=this.value})
b)分配[]为选择数据然后返回原始数据(我没有找到像强制更新或刷新的东西)

编辑(通用)
显示关联数组值的输入字段只是一种特殊情况,您可以想象在具有用户交互的模型上应用的任何d3js布局.
但通常:
a)接受DOM中的值返回源数据
b)将DOM恢复为实际的源数据
是否有任何d3js内置支持或d3js插件？

Answer 1

我找到了简单且内置的接受解决方案：

prop.select('div.input input').datum(function(d){obj[d.key]=(d.value=this.value);return d})

并恢复：

upd(prop.datum(function(d){return(d)}))

我之前已经尝试过这个，但是这一行有一个错误：

c.select('div.input input').attr("value", kv)

正确的代码在这里：

c.select('div.input input').property("value", kv)