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

我填充一组文本输入字段,显示使用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>

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

解决方法

相关文章