Mouse position in D3

by

You have to use an array. That will store x and y like:

var coordinates= d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];

// D3 v4
var x = d3.event.pageX - document.getElementById(<id-of-your-svg>).getBoundingClientRect().x + 10
var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10

Related Contents:

  1. What’s the best way to make a d3.js visualisation layout responsive?
  2. What is the difference D3 datum vs. data?
  3. How can I remove or replace SVG content?
  4. Resize svg when window is resized in d3.js
  5. D3.js: what is ‘g’ in .append(“g”) D3.js code?
  6. How to add a tooltip to an svg graphic?
  7. d3 axis labeling
  8. A good book for learning D3.js [closed]
  9. Invoke a callback at the end of a transition
  10. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  11. Updating SVG Element Z-Index With D3
  12. D3 javascript Difference between foreach and each
  13. Protovis vs D3.js
  14. D3.js prepend (similar to jQuery prepend)
  15. D3 Appending Text to a SVG Rectangle
  16. Understanding how D3.js binds data to nodes
  17. D3.js: “Uncaught SyntaxError: Unexpected token ILLEGAL”?
  18. How to remove an attribute in D3.js?
  19. Convert a directory structure in the filesystem to JSON with Node.js
  20. x >= x pattern in JavaScript
  21. How can I bring a circle to the front with d3?
  22. How to select parent element of current element in d3.js
  23. Fix Node Position in D3 Force Directed Layout
  24. How do you create a family tree in d3.js?
  25. How to invoke “click” event programmatically in d3?
  26. How do I include newlines in labels in D3 charts?
  27. d3 js – loading json without a http get
  28. Appending multiple non-nested elements for each data member with D3.js
  29. D3, nested appends, and data flow
  30. how to format time on xAxis use d3.js
  31. How to set text color for my d3 chart title?
  32. D3: What is a Bisector?
  33. d3.js & nvd3.js — How to set y-axis range
  34. Can you insert a line break in text when using d3.js? [duplicate]
  35. How to center text in a rect element in d3?
  36. How to make force layout graph in D3.js responsive to screen/browser size
  37. How to get coordinates of an svg element?
  38. How to set multiple attributes with one value function?
  39. Attaching ‘onclick’ event to D3 chart background
  40. How to disable double click zoom for d3.behavior.zoom?
  41. How to render rectangles in a D3 grouped bar chart using React Faux DOM?
  42. d3 add multiple classes with function
  43. How to set the background-color of a D3.js svg?
  44. Accessing d3.js element attributes from the datum?
  45. Unclosed SVG path appears to be closed
  46. D3js take data from an array instead of a file
  47. Learning d3.js for data visualisation [closed]
  48. D3.js: Position tooltips using element position, not mouse position?
  49. D3: Removing Elements
  50. Label outside arc (Pie chart) d3.js

Leave a Comment