Простой выбор текста D3.js

Я столкнулся с странным сценарием, используя D3, чтобы создать простой образный опыт.Простой выбор текста D3.js

Поток идет что-то вроде этого ...

1) Создайте элемент с помощью D3, со значением по умолчанию

2) Привязка функции к кнопке, чтобы прочитать значение этого текстового поля и делать вещи

var content = d3.select('#content'); 
      content.append('div') 
        .append("input") 
        .attr("type", "text") 
        .attr("id", "textinput") 
        .attr("size", "40") 
        .attr("value","Default Text"); 

      content.append('div') 
        .html('Get contents...') 
        .on("click", function() { 
         console.log("D3 Selection: " + d3.select("#textinput").attr('value')); 
         console.log("DOM Selection: " + document.getElementById("textinput").value); 
        });

значение выбора DOM является то, что было введено пользователем, а значение выбора D3 всегда «текст по умолчанию», независимо от того, что пользователь вошел:

D3 Selection: Default Text 
DOM Selection: I typed something

Что мне не хватает (кроме очевидных знаний, навыков и т. Д. - в моей защите я в основном просто делаю это для удовольствия)? Не должен ли функционировать D3-селектор таким образом?

Dave

источник

2016-04-12 user3654762

оказывается, что 'атр ("значение")' отличается от '.value'. Вы можете увидеть это, используя следующий код: 'd3.select (" # textinput "). Each (function() {return console.log (this.value);})'. Внутри '' '' '' '' '' 'относится к фактическому элементу страницы. [Релевантные] (http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html). – JSBob

Использование .property('value') вместо .attr('value').

источник

2016-04-12 19:41:30

Yup. Это работает. Благодарю. Вид любопытных * почему * вы можете установить через attr, но нужно получить через свойство – user3654762

Тонны деталей здесь о том, почему: http://stackoverflow.com/questions/5874652/prop-vs-attr – calvinf

Когда вы

.attr("id", "textinput") 
.attr("size", "40") 
.attr("value","Default Text");

Вы даете #textinput элемент а значение = По умолчанию текст т.е.

<div id="textinput" value="Default Text"></div>

Таким образом, вы не делаете его innerHTML текста по умолчанию, но вы даете его атрибут типа класса. И в консоли вы запрашиваете это значение с помощью выбора d3.

источник

2016-04-12 19:44:03 echonax

Вместо использования .attr() вместо этого вы должны использовать .property().

в соответствии с: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#property

Некоторые HTML элементы имеют особые свойства, которые не адресуемых с использованием стандартных атрибутов или стилей. Например, текстовые поля формы имеют свойство строки value, а флажки имеют значение checked boolean. Вы можете использовать оператор свойства для получения или установки этих свойств или любого другого адресуемого поля в базовом элементе, например className.

Причина, по которой вы можете установить значение с помощью метода .attr(), но не получить его, заключается в том, что .attr() взаимодействует с базовым HTML. Взаимодействие с пользователем не влияет на HTML, поэтому эти изменения не отражаются, когда вы получаете через .attr().

Редактировать: Обновлена ссылка на API d3v3.То же самое справедливо и для d3v4, хотя описание немного отличается: https://github.com/d3/d3-selection/blob/master/README.md#selection_property

источник

2016-04-12 19:44:11 Steve

Вы получили бы тот же «Default Text» из DOM, если вы назвали:

document.getElementById("textinput").getAttribute("value")

Вы можете получить значение входного сигнала от d3 доступа node() выделенные первый:

d3.select("#textinput").node().value

источник

2016-04-12 19:47:12

Простой выбор текста D3.js

ответ

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