我填充一组文本输入字段,显示使用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插件？
解决方法
你真的需要提供一些代码,因为从你的问题来看,很难说你如何使用d3来管理你的输入.我假设你是以某种方式绑定数据,所以我只是为了好玩而编码.它显示了一些使用enter / append,data()和datum()来管理输入组及其值的方法：
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<button id="report">Report</button>
<button id="reset">Reset</button>
<script>
var data = [{
v: Math.random()
},{
v: Math.random()
},{
v: Math.random()
}];
var inputs = d3.select('body')
.append('div')
.selectAll('input')
.data(data)
.enter()
.append('input')
.attr('type','text')
.attr('value',function(d) {
return d.v;
})
.on('blur',function(d) {
d._v = d.v;
d.v = this.value;
});
d3.select('#report')
.on('click',function(){
alert(inputs.data().map(function(d){
return d.v;
}).join("\n"));
});
d3.select('#reset')
.on('click',function(){
inputs.each(function(d){
if (d._v){
this.value = d._v;
d.v = d._v;
d._v = null;
}
});
});
</script>
</body>
</html>
