score:3
d3 relies on the ontouchstart
property for feature detection, i.e. touch event listeners are only attached if this property is present. due to changes in chrome v70 this detection mechanism seems to be broken in d3.
ontouch* apis default to disabled on desktop
to avoid confusion on touch feature detection, ontouch* members on
window
,document
, andelement
are disabled by default on desktop (mac, windows, linux, chromeos). note that this is not disabling touches, and usage such asaddeventlistener("touchstart", ...)
is not affected.
related: disable legacy touch event apis on desktop
your laptops running windows are most likely detected as being desktop devices instead of mobile devices. hence, they are affected by those changes to chrome v70 resulting in the touch event listeners not being registered any more.
this issue has been previously reported as an issue on the d3-drag module: #47 upcoming touch detection changes in desktop chrome. once i had commented on that issue providing a reference to this question, fortunately, mike bostock replied within an hour. better still, there is an easy solution to problem: you can use drag.touchable(detector)
to control when to apply touch event listeners overriding the default behavior:
touch event listeners are only registered if the detector returns truthy for the corresponding element when the drag behavior is applied.
as suggested by mike drag.touchable(navigator.maxtouchpoints)
seems to be a good candidate. the nuclear option drag.touchable(true)
would ensure the touch event listeners be applied in any case.
score:3
open following in chrome browser
chrome://flags
and find touch events api
set touch events api to enabled (the default is now “disabled”)
hopefully this works.
Source: stackoverflow.com
Related Query
- Touch handling completely broken on Chrome version 70
- Accessing touch properties on Windows Chrome #74
- D3 sankey chart nodes click event not working in google chrome (58.0.3029.110) version
- application not working after chrome update to version 66 but works in firefox and edge
- D3 LinearGradient broken in Chrome when using groups
- What is 'd3.svg.axis()' in d3 version 4?
- What does the "System" category of records mean in Chrome Timeline profiling tool?
- Selecting DOM elements in Chrome console
- d3 zoom and pan upgrade to version 4
- D3.js -- Ordinal scale (version 3 to version 4)
- Fine-grained event handling with D3 brushes
- Handling Mouse Events in Overlapping SVG Layers
- d3.js on "click" event handling running function without click event
- Uncaught TypeError: this.y.rangeBand is not a function after migration to D3 version 4
- D3.js version 4 make nodes sticky
- D3.js - load csv file from chrome
- d3JS: Plot lower-density data version of a large data set when zoomed out on line/area chart
- D3.js version 5 chart to PDF
- d3 zoom with touch devices sometimes behaves weirdly (using IONIC)
- D3 Zoom functionality is not working in Google chrome
- What is D3js version support policy?
- Adding nodes dynamically to D3 Force Layout in version 4
- d3 axis label cut off in chrome and firefox
- d3-transition attrTween, styleTween methods are not getting triggered in d3 version 4
- d3 version 4 workaround for drag origin
- D3 topology rendering issue in Chrome
- d3 zoom difference between Chrome and Firefox
- D3: "SVG4601: SVG Path data has incorrect format and could not be completely parsed."
- d3.js Loading version 3 vs version 4 in Jupyter Notebook
- D3.js IE vs Chrome SVG not showing
More Query from same tag
- Painless method to zoom&pan so that all elements are within drawing area - d3js
- d3js diagonal in tree layout
- D3 Adding arrowheads to edges, directed graph
- Filter/select specific type of data
- D3 bar chart sorting not working
- Attempting to render JSX element but getting undefined
- How to sort a map-of-maps (hierarchy) with D3.js
- Can not draw a rounded rect in svg using d3.js
- Using D3.js fill node circle with a base64 jpeg image that is not a URL
- D3js : How to get the real bounding box of features crossing the anti-meridian?
- "Property _ does not exist on _ type" D3.js typescript errors in Ionic 2 project
- Two label at y-Axis is not represented at a single time
- d3 histogram and barchart data
- Parsing Time Series Data using D3.js
- using d3 drag behavior's origin to create a "drag handle" for a tree node
- How to wrap d3 axis labels in <a> elements?
- D3.js Enter, Update, Exit issue
- make axis of radar chart conditional to existence of value
- Responsive SVG with d3.js and height attribute
- d3-force - Nodes are dragged away from links, ticks not run
- D3 Bar chart - Remove labels with zero value
- Converting from v3 to v5 in d3 doesn't update the visualization but adds another one
- Calling specific data in an array created with rollup with d3.js
- Using d3js to calculate midpoints and curve path for quadratic SVG connectors
- Unable to change x position of legend text inside a group element using D3
- Angular-UI tooltips on d3.js svg elements
- Importing csv, using D3.js and Javascript for a Line Graph
- dimple - color by series in bubble chart
- Assigning variable with $.getJson
- Specifying xDomain for discreteBarChart in nvd3 makes the chart improper