d3js chấp nhận/hoàn nguyên giá trị đầu vào

Tôi điền vào một tập hợp các trường nhập văn bản hiển thị giá trị của mảng kết hợp bằng cách sử dụng d3js. Người dùng thay đổi một số giá trị đầu vào.d3js chấp nhận/hoàn nguyên giá trị đầu vào

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()

thực hiện những điều tốt nhất để
a) cập nhật các mảng kết hợp ban đầu từ DOM (theo chiều ngược lại)
b) phục hồi các giá trị DOM để những bản gốc

giải pháp hiện tại của tôi là
là gì a) lặp qua các trường nhập d3.select("div.container").selectAll("div.prop").select('div.input input').each(function(){obj[this.name]=this.value})
b) gán [] làm dữ liệu lựa chọn và sau đó sao lưu dữ liệu ban đầu (Tôi không tìm thấy bất kỳ thứ gì như cập nhật hoặc làm mới lực)

Chỉnh sửa (khái quát)
Trường nhập liệu hiển thị giá trị của mảng kết hợp chỉ là trường hợp đặc biệt, bạn có thể tưởng tượng bố cục d3js được áp dụng trên mô hình tương tác với người dùng.
Nhưng nói chung:
a) chấp nhận các giá trị từ DOM lại dữ liệu nguồn
b) phục hồi các DOM để các nguồn dữ liệu thực tế
Có d3js built-in hỗ trợ hoặc một plugin d3js cho việc này?

Nguồn

2015-08-01 Pavel Gatnar

tôi thấy đơn giản và giải pháp tích hợp cho chấp nhận:

prop.select('div.input input').datum(function(d){obj[d.key]=(d.value=this.value);return d})

và hoàn nguyên:

upd(prop.datum(function(d){return(d)}))

Tôi cố gắng này đã trước đây, nhưng đã có một lỗi trên dòng này:

c.select('div.input input').attr("value", kv)

Mã đúng là ở đây:

c.select('div.input input').property("value", kv)

Nguồn

2015-08-04 15:37:42

Chỉ vì tò mò, 'obj' là gì? –

@CoolBlue nó là một mảng kết hợp, xem mã mã trong câu hỏi. nhưng nếu bạn có một mảng bình thường, bạn có thể bỏ qua nhiệm vụ 'obj [d.key] =' và các dấu ngoặc –

Bạn thực sự cần cung cấp một số mã vì câu hỏi của bạn khó có thể biết bạn đang sử dụng d3 như thế nào để quản lý dữ liệu đầu vào của mình. Tôi giả sử bạn đang ràng buộc dữ liệu trong một số thời trang vì vậy tôi chỉ cần mã hóa điều này cho vui. Nó cho thấy một số trong những cách nguội để sử dụng enter/append, data() và datum() để quản lý các nhóm của đầu vào và giá trị của họ:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" 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>

Nguồn

2015-08-01 19:02:23 Mark

vì vậy bạn có nghĩa là sử dụng một bản sao của dữ liệu gốc để xử lý này tình hình là giải pháp tốt nhất? Tôi tự hỏi không có hỗ trợ tích hợp. (Hãy tưởng tượng một tương tác của người dùng với một số mô hình trực quan có hàng nghìn nút) –

@PavelGatnar, tôi biết không có tích hợp cho việc này. Tôi biết ít nhất một ví dụ Bostock kinh điển theo cùng phương pháp tôi sử dụng: http://bl.ocks.org/mbostock/4339083 – Mark

vâng, tôi biết ví dụ này. có mô hình này được sử dụng để hiển thị/ẩn các nút –

d3js chấp nhận/hoàn nguyên giá trị đầu vào

Trả lời

Các vấn đề liên quan