score:4
Accepted answer
Your original calculations make use of the width/height of the marker being 20x20
pixels:
return latLng[0] - 10;
Your "recalcs" need to do this to as well with the resized image. I would stash the "real" x/y positoin in your data, so you can re-perform the calculations:
datum.realx = latLng[0];
if ( latLng ) return latLng[0] - 10;
And then move them in your zoom handler:
map.svg.selectAll("image")
.attr("height", 20*(1/scale))
.attr("width", 20*(1/scale))
.attr("x", function(d){
return d.realx - (20*(1/scale)/2);
})
.attr("y", function(d){
return d.realy - (20*(1/scale));
});
Source: stackoverflow.com
Related Query
- Issues with Datamaps D3 Pin/marker constant size and relative position while zooming
- Keep D3 objects size constant on Map while zoom in/out
- D3: keeping position of SVG's relative while panning and zooming
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- Achieving animated zoom with d3 and Leaflet
- Using d3-3d with pan & zoom while retaining rotation
- D3 Zoom with Scrollbars used as panning, Scrollbar width and height adjusts to zoom scale
- d3.js scatterplot with different colors and symbols - issues encountered
- how to zoom d3.js chart and reload data with greater granularity (in AJAX)
- Map zooming with D3 and Datamaps
- d3 world map with country click and zoom almost working not quite
- How to disable mouseover and mouseout event while dragging with d3?
- Grouped bar chart with zoom and updateable data error
- d3 zoom with button and double click but don't zoom with with scroll wheel
- How can I dynamically change the position and the size of direction arrows on a directed d3.js force layout?
- d3 zoom and drag with SVG axes and canvas chart
- d3 click event is stopped with zoom and pan layer
- SVG returns to its default scale and position after initializing it with specific scale and position
- How to smooth in zoom in and zoom out in D3.js with 50,000 nodes?
- Fix SVG element while scrolling vertically, issues with Firefox
- D3.js: How to keep marker and text on same position when zooming in and out
- Zoom with Slider and mouse scroll in d3.js
- How to implement mouse wheel zoom in D3 like Google Map with overlay and Ctrl + Scroll event?
- How can I scale my map to fit my svg size with d3 and geojson path data
- d3 force graph with divs and d3 zoom
- Svg how to position elements lo left and right like with floats?
- d3 zoom not centering on mouse position with radial tree
- Issues with preserveAspectRatio, viewBox and layout.size()
- D3.js Line chart with relative min and max in Y axis
- X axis label not displayed in bar chart with scroll and zoom feature - d3js, Brushing
More Query from same tag
- circle radius not updating on transition in d3
- d3 pie chart text label wrap
- dc.js bar chart with ordinal x axis scale doesn't render correctly
- Changing object variables to abbreviations before passing it to a network graph
- Return value from JSON, not the children count
- generate circle for each line of CSV D3.js
- Javascript and D3 error: Cannot read property 'cloud' of undefined
- d3js update and maintain structure of visualization
- Error parsing d3 line chart JSON data
- How do you change the interpolation for a zoom behavior in d3.js
- D3 how to draw chart with a x data between two y data
- d3.js - how to automatically calculate arc lengths in radial dendrogram
- how to draw an array of circles in a straight line, in the bottom of the browser window
- Syntax for axis transition in svg/d3
- D3 updating local data and redrawing pie as it is updated
- Trouble with D3.js and browserify
- Convert svg:image to grayscale on click using d3
- How to add text to Cluster Force Layout bubbles
- D3: change line stroke color by hovering over legend
- making circle clickable in svg
- Cannot read property 'length' of undefined in a pie chart
- Appending maps as part of group (multiple maps)
- D3 JS: Create a page index.html to run the js project
- d3 limit zoom level for time axis
- How to use D3 to append several html line of codes
- D3 displaying same period of time in xAxis
- updating/modifying d3 word cloud with new data
- Problems with interactivity
- Showing JSON format in C3 (D3)
- D3 scatterplot click to push and splice data and update the DOM behaves erratically