score:1
Yes, this is the intended behaviour. In fact, we normally use those x
and y
properties in a drag event to avoid the element jumping around the container (when one is lazy enough to specify the correct subject).
Since you asked for a reference, have a look at drag.subject
:
The subject of a drag gesture represents the thing being dragged. It is computed when an initiating input event is received, such as a mousedown or touchstart, immediately before the drag gesture starts.
Then, in the next paragraph, the most important information to you:
The default subject is the datum of the element in the originating selection (see drag) that received the initiating input event; if this datum is undefined, an object representing the coordinates of the pointer is created. When dragging circle elements in SVG, the default subject is thus the datum of the circle being dragged. (emphasis mine)
And finally:
The returned subject should be an object that exposes
x
andy
properties, so that the relative position of the subject and the pointer can be preserved during the drag gesture.
So, if you don't want the x
and y
in the datum being used by drag
, just set a different object in the subject:
.subject(function() {
return {
foo: d3.event.x,
bar: d3.event.y
};
})
Here is your code with that change:
function onHandlerDrag() {
return (d) => {
console.log(d3.event.y);
}
}
var scaleX = d3
.scaleLinear()
.domain([0, 500])
.range([0, 500]);
var scaleY = d3
.scaleLinear()
.domain([0, 500])
.range([0, 500]);
var svgGraph = d3
.select('.area')
.attr('width', 500)
.attr('height', 500);
var circle1 = svgGraph
.append('circle')
.attr('cx', scaleX(20))
.attr('cy', scaleY(20))
.attr('r', 15)
.call(d3.drag()
.on('start', (d) => {})
.on('drag', onHandlerDrag())
.on('end', (d) => {}));
var circle2 = svgGraph
.selectAll('.circle2')
.data([{
x: 3,
y: 2
}])
.enter()
.append('circle') // Uses the enter().append() method
.attr('cx', scaleX(100))
.attr('cy', scaleY(100))
.attr('r', 15)
.call(d3.drag()
.subject(function() {
return {
foo: d3.event.x,
bar: d3.event.y
};
})
.on('start', (d) => {})
.on('drag', onHandlerDrag())
.on('end', (d) => {}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg class='area'></svg>
Source: stackoverflow.com
Related Query
- Why d3.event in dragging callback is somehow related to data coordinate
- d3.js undefined data value in callback function click event
- Why does event listener callback function only work inside function scope?
- Why mouserover returning all data in callback
- Why doesn't click event always fire?
- nvd3.js : unable to bind onClick event with the data points in the svg
- why isn't the checkbox change event triggered when i do it programatically in d3js
- pass arguments to a d3 on "click" event callback
- why is my d3 data outputting after body?
- Looping through data attributes to create 4 separate bar charts... why are there "phantom" data elements being bound to the xAxis?
- Why d3 updates entire data
- D3 - Unable to get data parameter on click event
- How to animate transition over grouped, nested json coordinate data with D3.js?
- How can we create an onclick event for a d3 data map?
- Best Practices for reading csv data with d3 in node. Why gettting a TypeError?
- d3.js: Passing data from parent node to child node onclick event
- How to display rectangular div with data on mouse over event of any node in d3 js tree?
- Why does it need two clicks in D3.js for my click event to fire?
- D3.js get data index of shape on mouseover event
- How to disable mouseover and mouseout event while dragging with d3?
- d3.js dynamic data reload possibly related to exit().remove()
- Why is my d3.treemap() returning a data viz with big gaps?
- Why is D3.js data only available to child nodes when enter() is chained, not invoked separately
- Why d3.domain() has only one element when I use the whole data array as domain?
- Why does the callback function called at the end and how to test the function?
- D3 Datamaps : Pass additional values related to data on click of country
- D3.js and nested data - Why is my exit() set empty
- d3 dragging event does not terminate in Firefox
- Why d3 removes data during second update
- Dynamically updating the parallel coordinate data
More Query from same tag
- SVG indicator while ajax gather all information (D3.js)
- Updated: changing the graph based on the slider date on x axis
- Collapse d3js tree to a specified depth
- What is the d3 structure needed to make a reusable svg entity
- How can I extend the d3.js selection whit a custom filter function?
- Use legend in stacked bar Graph along with tooltip d3 js
- How to manipulate the layer of a element in an existing SVG?
- How can I send a csv file to d3.js in Django?
- correct way to tell if my selection caught any existing elements
- Is it possible to vary the time interval while the timer is running in d3.js?
- Dashboard supporting d3
- How to resolve d3js tree graph getting clipped
- d3.min.js:1 Uncaught TypeError: n.getFullYear is not a function
- How to make bars have different colors in d3?
- D3js compatibility error with google chrome
- D3.js difference between 'd.value' and 'd[value]'
- set tickValues for y1Axis in linePlusBarChart in ng2-nvd3
- D3 Zoom's translateExtent not working as expected
- How to use nvd3 indentedTree with AngularJS
- D3 colour gradient not forming mathematical circle around centre of area
- Two bar graphs in the same place, controlled by one slider D3.js
- Reduce data on the fly in D3.js
- How do i figure out the x and y position of my mouse in d3?
- Typescript d3(Power BI)
- loop over js array in d3 callback tree
- D3 How to keep element same size while transform scale / translate
- Undesireable D3 chord diagram link twist
- How to prepare data for d3 stacked barchart using rollup
- How can I render a D3.js visualization as a JPG, or an image?
- CSV import undefined data