score:5
Accepted answer
you have to use d3.event.keycode
. according to the api, d3.event
...:
... is set during the invocation of an event listener, and is reset after the listener terminates. use this to access standard event fields.
here is a basic demo. click on "foo", "bar" or "baz" to focus, then press any key and look at the console:
var body = d3.select("body");
var p = body.selectall(null)
.data(["foo", "bar", "baz"])
.enter()
.append("p")
.attr('tabindex', '0')
.attr('focusable', 'true')
.html(string)
.on("keypress", function() {
if(d3.event.keycode === 32 || d3.event.keycode === 13){
console.log("congrats, you pressed enter or space!")
}
})
<script src="https://d3js.org/d3.v4.min.js"></script>
Source: stackoverflow.com
Related Query
- Detecting keypress in D3.js
- Detecting visible nodes in d3.js force layout after zoom-pan
- Detecting line closest to the mouse pointer with interrupted lines
- Best practice about detecting DOM element exist in D3
- How are enter() and exit() detecting updated data in D3?
- Angular- detecting a change in scope
- event.touches detecting multiple touch events after touch screen spam
- What's the best way to make a d3.js visualisation layout responsive?
- What is the difference D3 datum vs. data?
- How can I remove or replace SVG content?
- Resize svg when window is resized in d3.js
- Show data on mouseover of circle
- D3.js: what is 'g' in .append("g") D3.js code?
- Center a map in d3 given a geoJSON object
- D3.js: How to get the computed width and height for an arbitrary element?
- Python equivalent of D3.js
- What is the difference between svg's x and dx attribute?
- Fast and responsive interactive charts/graphs: SVG, Canvas, other?
- How to add a tooltip to an svg graphic?
- What is the difference between D3 and jQuery?
- d3 axis labeling
- A good book for learning D3.js
- Invoke a callback at the end of a transition
- Difference between GeoJSON and TopoJSON
- How do I remove all children elements from a node and then apply them again with different color and size?
- Javascript library d3 call function
- Adding new nodes to Force-directed layout
- How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
- Updating SVG Element Z-Index With D3
- D3 javascript Difference between foreach and each
More Query from same tag
- d3 onmouseover path event selects area under the line
- D3 V4 Multi series line chart: Adding data points to lines with same color as lines
- Getting the instance of the canvas d3js
- DC.js dynamically refresh charts to use updated dataset
- How to assign dynamic x axis value and y axis from variable?
- Want to Make my chart look responsive in D3
- How to add horizontal lines on bar charts d3.js
- Values from file don't expand as x axis in D3.js using x.domain?
- formatting nvd3.js colors and interactiveGuideLine
- ReferenceError when calling function in external script from a script tag
- Loading a .csv file in d3.js inside django is not working
- Drawing Paths Between Circles
- Conditional transitions in d3
- D3.js - DOM text exiting incorrectly
- How to add Legend bar to Row Chart Dc.js
- put 2 first letters in bold in c3.js - d3.js
- How to place legends for stacked bar chart underneath in d3.js
- D3-brush disable SHIFT locking x/y position
- D3 v4 Tree -- Adding Clarity
- D3js force directed graph linkStrength blocked to 0
- Curve in D3 shape
- D3, Typescript, and GraphNodes (Optional fields in a typescript interface)
- d3.js projection (albersUsa) mapping incorrectly
- PHP: d3.js script does not display anything
- Why am I unable to filter my JSON array in d3.js?
- Svg brush as slider. How to set slider scale graduation frequency
- Unable to view bars in graph
- Problems in rendering multiline Time series graph in D3
- Multiple Area Charts with D3.js
- Append css to svg in D3