score:1
Accepted answer
I think your svg's are dissapearing because of css of these elements is by default set to overflow: hidden
. You can try to set overflow to overlay in your js code for svg.attr:
function translateSVG() {
...
svg.attr("style", function() {
return "overflow: overlay;" +
"transform: translate3d(" + viewBoxLeft + "px, " + viewBoxTop + "px, 0px);";
});
}
About the app's behaviour on mobile devices, did you remember to set the meta for it?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Another thing worth to debug is that if your map on mobile device even responses on clicks. In example, create function with simple alert to check if your taps on map are fireing your alert function.
I didn't have this problem, but I read that in this situation it may be helpful to add the following attribute to the div containing your map:
data-tap-disabled="true"
Source: stackoverflow.com
Related Query
- Circles disappear on mobile, when map is zoomed
- SVG circles don't get repositioned when zooming leaflet map
- Why does the whole SVG disappear when I set map opacity to 0 in D3?
- D3.js: Moving circles along with line in a 2D graph when zoomed
- D3 axis labels become too fine grained when zoomed in
- d3JS: Plot lower-density data version of a large data set when zoomed out on line/area chart
- d3.layout.pack stacks circles when sort is ascending
- How to draw circles with radii given in kilometers accurately on world map
- d3.js - stacked graphs that are both zoomed in and out/scrolled when using scrollwheel/drag on either graph
- Map custom value field to x value when using a stacked layout
- Circles in Map Displayed Incorrect Location in D3 V4
- How do I get the d3 svg points to stay in their correct position on the leaflet map when zooming?
- d3 circles on a leaflet map
- How to make labels appear only when the chart is zoomed in
- D3 adding element to zoomed map
- Getting NaN values in svg path 'd' attr when trying to map geojson data
- Using D3, how can I update circles on a map after panning?
- D3 cartography: lon/lat circles in wrong place on map (projection)
- How can I use D3.js "onClick" event with an nvd3 bar when zoomed in on chart data?
- D3 show text for nodes when zoomed
- Resize circles on map upon click-to-zoom?
- d3.js voronoi event. Mouseover seems to disappear when cursor is exactly above point
- d3 skips first index in an array when appending circles
- How to make the circles disappear based on keyboard input?
- how to avoid overlapping circles on a map using d3js
- Why do these 9 U.S. cities not correspond to their actual locations on a D3 map when I plot them using long/lat with an Albers USA projection?
- D3 Pan+Zoom - Add item when zoomed results in wrong position
- d3.js: map with concentric circles emanating from dots
- d3js bar chart issue when used with jquery mobile
- Re-scale axis when zoomed
More Query from same tag
- Re-adding removed elements in d3.js
- data uri as background image of svg not converted to canvas on safari live site
- Filter d3 js objects based on form input
- Cross Hairs component throws error, dataset specific?
- d3.js & nvd3.js -- How to set y-axis range
- Moving all nodes the same time including links?
- How to get key of array or property value
- selectAll("rect") selects all rectangles, but doesn't apply the mouseover function to some
- How I can turn a figure that is upside down?
- Waterfall chart with JavaFX
- D3 - Can't get packed circles to work from csv
- Feed discontinuous data to Cubism.js chart
- D3 Force layout DIV vs SVG
- D3: Why doesn't the heatmap color legend appear?
- labels are not getting sorted in sortable barchart d3.js
- Starting a d3 axis timescale from zero
- Modify link and node colours in Sankey with NetworkD3
- How can I use the latest version of the d3 js library with Angular Dart?
- Using d3 to shade area between two lines
- D3 Javascript: Removing and updating elements
- Typescript and d3
- Unable to incorporate d3 in python Jupyter notebook
- Animate an external svg object along a simple line path in D3.js
- set date without time in D3 js
- How do you change the width of a Y-axis in a D3 chart?
- Problems understanding d3-example-code in Observable
- How to scale and centre all items in a layered topojson map to fit in D3 version 4?
- Multiple graphs on one page, scale error in D3.js
- D3 event showing 'ReferenceError: event is not defined' in Firefox
- Sending HTTP request headers in C3.js to source URL