score:0
use .property('value')
instead of .attr('value')
.
score:0
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.
score: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
score:3
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 achecked
boolean property. you can use the property operator to get or set these properties, or any other addressable field on the underlying element, such asclassname
.
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
Source: stackoverflow.com
Related Query
- Simple D3.js text selection
- Simple curved text within a circle
- Plot.ly: Simple prefix or suffix for hover text
- How to enable text selection in a D3.js-SVG that has zoom enabled?
- How to use an exit selection on text with tspan
- D3 - How to get width of previous elements in Text selection
- D3.js text not coming below each other and color selection
- d3 data selection for creating a simple chart
- Append text based on g's id to a selection of gs: Cannot read property 'attr' of undefined
- d3 text function on a selection giving undefined
- d3js svg text selection by id
- rotate x axis text in d3
- D3 Appending Text to a SVG Rectangle
- d3 add text to circle
- correct way to tell if my selection caught any existing elements
- How to center text in a rect element in d3?
- Can you insert a line break in text when using d3.js?
- How to write vertical text from bottom to top without using transform rotate?
- How to set text color for my d3 chart title?
- SVG foreignObject contents do not display unless plain text
- NVD3 chart fails to calculate legend text length in Chrome, since Window.getComputedStyle does not return font-size correctly
- Loading D3.js data from a simple JSON string
- d3.js: Align text labels between ticks on the axis
- Can enter() selection be reused after append/insert?
- How to access the parentNode of a selection to raise an element?
- Add ellipses to overflowing text in SVG?
- Calculate width of text before drawing the text
- Add text label to d3 node in Force directed Graph and resize on hover
- read width of d3 text element
- Simple graph of nodes and links without using force layout
More Query from same tag
- d3 Zoomable Treemap from CSV
- Add the data column to the tooltip text
- Set a specific color to a bubble chart
- How do I import d3 (v4) into typescript in an ASP.NET MVC Application?
- D3.js line chart with CSV multi-level data
- Angularjs d3 custom directive with filter on data
- d3.js scales, axis, and customizing ticks
- D3 click event returning null attribute
- d3 - Get pixel width between two numbers on line chart x-axis (to set a background <rect> width)
- Plotting zeros with dimple/d3 js results NaN
- svg zoom out text in Chrome
- third party API data for ruby on rails web application
- D3.js implements first stage of transition but not 2nd
- Issue in generating the chart with required color, i.e. specified colors are not displayed
- d3.nest() key/value undefined values
- Make d3 observe a property in a dataset
- How to map / merge differently structured objects
- D3 incorrect drag behaviour
- Selected element won't change in d3
- Graph ~ axis alignment issue
- D3 JS - How to display data for each element on mouse over
- Update y axis title
- Getting error in loading json from static file?
- d3 Change colour of tick on axis with function
- Change d3.js line graph stroke colour above a data point
- Javascript sorting for a SunburstR Graph
- Firefox not downloading correct file to machine
- Interaction with the legend D3.js grouped bar chart
- d3 fade icons of non connected nodes
- How to produce axes that do not intersect at (0, 0)?