gpt4 book ai didi

d3.js - d3js 接受/恢复输入值

转载 作者:行者123 更新时间:2023-12-04 12:40:24 26 4
gpt4 key购买 nike

我使用 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 来管理您的输入。我假设您正在以某种方式进行数据绑定(bind),所以我只是为了好玩而编写了这个代码。它展示了一些很酷的使用方式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()
}, {
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>

关于d3.js - d3js 接受/恢复输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31762934/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com