score:1
you could try fixing the position of the svg element, create a group under it and translate the group when any of the object is dragged. in this question you can find more details about this approach:
score:5
the drag behaviour needs to be called on the selection whose position you're updating during the drag. in your code, you are updating the position of the parent node, which causes strange "jittering", because the drag position is itself relative to the parent node.
for example, you could replace your move
function above with:
function move() {
d3.select(this)
.attr("transform", "translate(" + d3.event.x + "," + d3.event.y + ")");
}
Source: stackoverflow.com
Related Query
- How To Move (Drag and Drop) multiple Shapes with D3
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- how to perform d3 drag and drop
- How can D3 select multiple shapes with shared attributes from a group?
- d3 v4 drag and drop with TypeScript
- How to drag and drop a group of rectangles in svg in d3.js?
- How to make a mouseover interactive line graph with multiple data series and 2 y axes?
- How to load multiple files with Queue.js and D3.js?
- how to drag element with mouse move
- How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?
- d3 How to limit drag and drop area
- dc.js with crossfilter and d3, how to load multiple csv files at once, without knowing how many files the user will upload
- How drag and drop a circle in D3?
- drag and drop a circle inside another circle with re size and auto adjust
- How to drag and drop a rectangle
- How to load multiple csv files and use them mixed with each other
- Drag & Drop SVG Shapes Using D3 and AngularJS
- how to move multiple paths to the left with a fluid animation between my data
- How to make Drag and Drop of nodes work inside a Radial Reingold–Tilford Tree in D3?
- How to keep mouse over object when using drag and snap to with d3.js
- Create bend points in links with drag and drop using D3 or javascript
- D3js dynamically attach circles into a line with drag and drop
- d3 with using angular drag and drop directive
- D3 drag and drop with anchor tag not clickable in FF
- How do I remove all children elements from a node and then apply them again with different color and size?
- How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
- How to set multiple attributes with one value function?
- How to select multiple selectors with selectAll?
- How to use D3 selectAll with multiple class names
- How to create floor plans that work nice with mobile and desktop browsers?
More Query from same tag
- D3.js v5 Domain() not taking variable for array
- How can a function with no parameters all of a sudden take parameters in javascript?
- D3 stacked bar chart with time
- Random horizontal line showing in d3 line chart?
- Choropleth map using d3.js
- How to combine coordinates into one svg element in D3?
- D3. Within a text string how do I style substrings?
- How to add jitter to avoid overplot in D3?
- d3.js Linechart in angular2 taking data from url(server) not Local data
- DC.JS create series plot using multiple columns
- updating the data of bar chart in c3.js
- How to draw a simple Force-directed graph in D3 Javascript
- D3 stop and restart transition along path to allow click through to geo data coordinates
- Overflow a circle outside the bounds
- d3js Force Layout on a Leaflet map
- D3 Uncaught TypeError: path.data is not a function
- How to add dots in D3 graph?
- json representation for d3 force directed networks
- D3js : How to get the real bounding box of features crossing the anti-meridian?
- D3 Inversion of mouse position to closest tick value on the X-axis
- Wrong display of csv input to nvd3 chart (related to timeformatting)
- D3.Geo.Circle with Canvas
- D3js gauge graph
- Server Side d3 - Encoding SVG as a Base64 Image
- Getting "TypeError: u.parentNode is undefined" when calling d3.sort or d3.order
- D3.js - merge two adjacency matrices in ones with D3/JS
- Transition of an axis
- DC.js - Custom ordering of ordinal scale line chart
- d3.js - Treemap where parent's value is greater than sum of its children
- Adding timeAxis with Dimple.js