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

你真的需要提供一些代码，因为从你的问题来看，很难说你是如何使用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()
    }, {
      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>

Answer 2

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

<html>

<body>
  <input type="text" onkeyup="updateLink(this);">
  <a id="atag">Google</a>
</body>

</html>

并恢复：

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)

d3js接受/恢复输入值

2 个答案: