score:3
Accepted answer
You have to update the position of the circles in your dragging
function:
var dragging = function(d) {
var c = projection.rotate();
projection.rotate([c[0] + d3.event.dx / 6, c[1] - d3.event.dy / 6])
map.selectAll('path').attr('d', path);
map.selectAll(".circles").attr("cx", function(d) {
var coords = projection([d.Longitude_imp, d.Latitude_imp])
return coords[0];
})
.attr("cy", function(d) {
var coords = projection([d.Longitude_imp, d.Latitude_imp])
return coords[1];
})
}
Also, select them using the correct class.
Regarding performance, if you don't want to calculate coords
twice, you can use an each
:
var dragging = function(d) {
var c = projection.rotate();
projection.rotate([c[0] + d3.event.dx / 6, c[1] - d3.event.dy / 6])
map.selectAll('path').attr('d', path);
map.selectAll(".circles").each(function(d) {
var coords = projection([d.Longitude_imp, d.Latitude_imp])
d3.select(this).attr("cx", function(d) {
return coords[0];
})
.attr("cy", function(d) {
return coords[1];
})
})
}
Here is your bl.ocks with that change: http://bl.ocks.org/anonymous/dc2d4fc810550586d40d4b1ce9088422/40c6e199a5be4e152c0bd94a13ea94eba41f004b
PS: You have a problem with the circles at the far side of the globe... however, this is another issue, already addressed here at S.O. For instance, this answer of mine: https://stackoverflow.com/a/46441983/5768908
Source: stackoverflow.com
Related Query
- Drag Orthographic with circles d3.js
- hide circles on Orthographic drag
- D3js dynamically attach circles into a line with drag and drop
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- Testing D3.js drag events with Cypress.js
- Circle clip and projection with D3 orthographic
- Wrapping great circles with Mercator maps with D3.js, Leaflet, or Mapbox
- How to draw circles around circular path with D3js
- Adding circles to multiline graph with d3.js
- d3-drag - rescale y-axis with drag in d3v5
- How to draw circles with radii given in kilometers accurately on world map
- Animating circles with D3.js
- d3 v4 drag line chart with x and y axes
- d3.js: Drag is disabled when use zoom with force layout
- d3 v4 drag and drop with TypeScript
- Moving scatter plot circles with context zooming and brush in D3
- D3: Tree diagram with images and circles as nodes
- Two Rows with Circles in D3
- Drawing three intertwined circles with D3
- How to drag and rotate orthographic map (globe) using d3.js
- d3.v3 scatterplot with all circles the same radius
- Resetting drag with multiple elements
- D3js: drag slider working with touch
- How to drag nodes with children in d3 circle packing?
- d3 zoom and drag with SVG axes and canvas chart
- Pan, zoom canvas together with drag nodes in D3
- Adding circles to multi line graph with dropdown on d3.js
- Leaflet.js+d3.js circles with transition
- Allow zoom with buttons only, allow pan with mouse drag
- Testing D3 Applications with click and drag events
More Query from same tag
- How to translate SVG and all its children
- Using D3 to access nested JSON data
- jquery and d3: why does my page reload when I use $("svg").remove()?
- d3.js force graph with type script and angular2
- How do I apply two svgs on one html page?
- Right Axis not displaying on Dual Axis Grouped Bar and Line Chart D3
- D3.js updating the code, Error: Cannot read property 'axis' of undefined?
- D3.js visual selecting image URL from object array dataset
- d3js alert leaf name
- Adding borders to d3 curves
- TreeMap not working with JSON
- selectAll("rect") selects all rectangles, but doesn't apply the mouseover function to some
- d3 x scale and labels at the bottom
- d3 easing functions for accelerated/decelerated motion
- Angular NVD3 Multibar Chart with dual y-axis to showup only line using json data
- How to update the map scale on crossfilter dimension.filter()?
- For Git Hub Pages - Add relative link to .csv file in index.html using d3.csv
- How to turn a raw DOM element in to a D3 selection?
- d3.js multiseries line chart tooltip issue
- Add points to D3 chart
- Passing variable from Server side to client side JavaScript Node.js
- How to set `side: right` of `textPath` in Chrome?
- How do I use angularjs directives in generated d3 html?
- Pie chart avoiding same adjacent color when rotating colors
- How to color the area under a scatter plot with different colors
- What does the .x function on nvd3 implements?
- How to set up custom color scale with multiple sub-parts in D3?
- Code flow through callback in java script
- Why is d3 pack layout crashing unexpectedly?
- Handling large datasets in dimple.js to render a chart