Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/perl/11.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
D3.js d3js接受/恢复输入值_D3.js - Fatal编程技术网

D3.js d3js接受/恢复输入值

D3.js d3js接受/恢复输入值,d3.js,D3.js,我使用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)

我使用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()
有哪些最佳实践可供参考 从DOM反向更新原始关联数组 b将DOM值还原为原始值

我目前的解决办法是 对输入字段d3.selectdiv.container.selectAlldiv.prop.select'div.input input'。每个函数{obj[this.name]=this.value} b将[]指定为选择数据,然后返回原始数据我没有找到任何类似强制更新或刷新的内容

编辑广义 显示关联数组值的输入字段只是一种特殊情况,您可以想象任何应用于具有用户交互的模型上的d3js布局。 但一般来说: a接受从DOM返回到源数据的值 b将DOM还原为实际的源数据
是否有d3js内置支持或d3js插件用于此功能?

您确实需要提供一些代码,因为从您的问题中很难判断您是如何使用d3来管理输入的。我假设您是以某种方式进行数据绑定的,所以我只是为了好玩而编写了这个代码。它展示了使用enter/append、data和data管理输入组及其值的一些方法:

汇报 重置 风险值数据=[{ v:数学 }, { v:数学 }, { v:数学 }, { v:数学 }, { v:数学 }, { v:数学 }]; 变量输入=d3。选择“主体” .附加'div' 。选择所有“输入” .数据 进来 .附加'input' .attr'type','text' .attr'value',函数d{ 返回d.v; } .在“模糊”上,函数为{ d、 _v=d.v; d、 v=该值; }; d3.选择“报告” .点击,功能{ alertinputs.data.mapfunctiond{ 返回d.v; }。加入\n; }; d3.选择“重置” .点击,功能{ inputs.eachfunction{ 如果d.(v){ 该值=d._v; d、 v=d.(u v ;; d、 _v=零; } }; };
我为accept找到了简单的内置解决方案:

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)

那么你的意思是使用原始数据的副本来处理这种情况是最好的解决方案吗?我想知道没有内置的支持。想象一个用户与某个可视化模型的交互,该模型有数千个用户nodes@PavelGatnar,我知道没有内置的。我知道至少有一个规范的博斯托克例子,它遵循我使用的相同方法:是的,我知道这个例子。这里有一个用于显示/隐藏节点的模式感谢您的帮助,我发现了一个错误,并且是Restore的内置解决方案只是出于好奇,obj是做什么的?@CoolBlue它是一个关联数组,请参阅问题中的代码片段。但是如果你有一个普通数组,你可以跳过赋值obj[d.key]=和括号