Simple D3.js text selection

Question

I've run into a strange scenario using D3 to create a simple form-like experience.

The flow goes something like this...

1) Create the element using D3, with a default value

2) Bind a function to a button to read the value of this text area and do stuff

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);
                    });

The value of the DOM selection is whatever has been entered by the user, and the value of the D3 selection is always "Default Text", no matter what the user has entered:

D3 Selection: Default Text
DOM Selection: I typed something

What am I missing (aside from the obvious knowledge, skill etc. - in my defense I mostly just do this for fun)? Is the D3 selector not supposed to function in this way?

Dave

It appears that `attr("value")` is distinct from `.value`. You can see this by using the following code: `d3.select("#textinput").each(function(){return console.log(this.value);})`. Within the `each` function, `this` refers to the actual page element. [Related](http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html). — JSBob, Apr 12 '16 at 19:39

Steve · Answer 1 · 2017-07-16T00:03:59.863

Instead of using .attr(), you should use .property() instead.

according to: https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#property

Some HTML elements have special properties that are not addressable using standard attributes or styles. For example, form text fields have a value string property, and checkboxes have a checked boolean property. You can use the property operator to get or set these properties, or any other addressable field on the underlying element, such as className.

The reason why you can set the value via the .attr() method, but not get it, is because .attr() interacts with the underlying HTML. User interaction doesn't affect the HTML, so those changes aren't reflected when you get via .attr().

Edit: Updated the link to the d3v3 API. The same also holds true for d3v4, though the description is slightly different: https://github.com/d3/d3-selection/blob/master/README.md#selection_property

score 1 · Answer 2 · answered Apr 12 '16 at 19:47

1

You would get the same "Default Text" from DOM if you called:

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

You can get the input value from a d3 selction accessing node() first:

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

answered Apr 12 '16 at 19:47

Lukasz Wiktor

19,644
5
69
82

score 0 · Answer 3 · answered Apr 12 '16 at 19:41

0

Use .property('value') instead of .attr('value').

answered Apr 12 '16 at 19:41

Pavel Gatnar

3,987
2
19
29

Yup. That works. Thanks. Kind of curious *why* you can set via attr, but need to retrieve via property – user3654762 Apr 12 '16 at 19:46
Tons of details here about why: http://stackoverflow.com/questions/5874652/prop-vs-attr – calvinf Apr 12 '16 at 23:53

score 0 · Answer 4 · answered Apr 12 '16 at 19:44

When you do

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

You are giving the #textinput element a value=Default text i.e:

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

So you are not making its innerHTML Default Text but you are giving it an attribute like a class. And in the console you are asking for that value with your d3 selection.

Simple D3.js text selection

4 Answers4