d3js принимает/возвращает значения ввода

Я заполняю набор полей ввода текста, отображающих значения ассоциативного массива с использованием 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()

Каковы лучшие практики в
а) обновить исходный ассоциативный массив из DOM (противоположное направление)
б) возвращаются значение DOM к оригинальному

Моих текущие решений являются
a) итерация по входным полям d3.select("div.container").selectAll("div.prop").select('div.input input').each(function(){obj[this.name]=this.value})
b) назначение [] в качестве данных выбора, а затем возврат исходных данных (я не нашел ничего подобного обновлению или обновлению силы)

Edit (обобщенно)
поля ввода, отображающее значения ассоциативного массива является лишь частным случаем, вы можете себе представить, какие d3js макет применяются на модели с взаимодействием с пользователем.
Но в целом:
а) принимают значения из DOM обратно к исходным данным
б) вернуться к DOM с фактическими данными
источника Есть ли d3js встроенной поддержки или d3js плагин для этого?

источник

2015-08-01 Pavel Gatnar

Я нашел простой и встроенные решения для принимаем:

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)

источник

2015-08-04 15:37:42

Просто из любопытства, что такое 'obj' for? –

@CoolBlue это ассоциативный массив, см. Codenippet в вопросе. но если у вас нормальный массив, вы можете пропустить присвоение 'obj [d.key] =' и скобки –

Вам действительно нужно предоставить некоторый код, потому что из вашего вопроса трудно сказать, как вы используете d3 для управления входами. Я предполагаю, что вы привязываете данные каким-то образом, поэтому я просто закодировал это для удовольствия. Это показывает некоторые из остывает способов использования enter/append, data() и datum() управлять группами входных и их значения:

<!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>

источник

2015-08-01 19:02:23 Mark

так вы имеете в виду использовать копию исходных данных для обработки этого ситуация - лучшее решение? Интересно, что нет встроенной поддержки. (представьте себе взаимодействие пользователя с некоторой визуализированной моделью, имеющей тысячи узлов) –

@PavelGatnar, я не знаю никаких встроенных модулей для этого. Я знаю, по крайней мере, один канонический пример Бостока, который следует тому же методу, который я использую: http://bl.ocks.org/mbostock/4339083 – Mark

да, я знаю этот пример. есть этот шаблон, используемый для показа/скрытия узлов –

d3js принимает/возвращает значения ввода

ответ

Смежные вопросы